Q:

JavaScript files API with multiple inputs

Ok, I have multiple file inputs in my app. I try to get file API for each of them, but I get the unidentified error. 
My code is in HTML
 <div>
            @if(isset($images[$i]))

            <img src="{{ asset('profilepics/'.$images[$i]->name) }}" class="img-thumbnail"  width="104" height="36"   />
                @else
                <img src="{{ asset('profilepics/select_image.png') }}" class="img-thumbnail"  width="104" height="36"   />
            @endif
            <input type="file" class="fu" data-id="{{$i}}" name="image_file_{{$i}}" id="image_file_{{$i}}"  />
        <div>

Js code is
$('.fu').click(function(){
    var x = $(this).data('id');

    fileSelectHandler(x);
});

function fileSelectHandler(x) {

    var oFile = $('#image_file_'+x).files[0];
    ...

But in var oFile, I get error unidentified error. My using of files[0] probably it's wrong. Any solution

A:

If you need to use files[] you need to put the pure-javascript DOM object, not the jQuery object. You can achieve that only adding .get(0) to retrieve the DOM object:
var oFile = $('#image_file_'+x).get(0).files[0];

