JavaScript files API with multiple inputs

Question

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

Please inspect one of your images, and provide the HTML that's been generated. — Darin Peterson
– Darin Peterson, Commented Feb 4, 2016 at 13:00

Marcos Pérez Gude · Accepted Answer · 2016-02-04 12:55:53Z

1

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];

answered Feb 4, 2016 at 12:55

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vladimir Stus Over a year ago

hello are you online to help me

Collectives™ on Stack Overflow

JavaScript files API with multiple inputs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related