How to read multiple file inputs using FileReader API in js

Question

I was looking for a solution though there are many answers on the same topics I was unable to figure out the problem in my code.

The problem is, I can only read the first file input using this API. The last two inputs show undefined if I console.log(e.target.files[1]);

I am using vue 2. Here is the codes I have.

For the three inputs I have

<input type="file" name="file[]" @change="img1">
<input type="file" name="file[]" @change="img2">
<input type="file" name="file[]" @change="img3">

      img1(e){
        console.log(e.target.files[0]);
        this.readFile(e,'img1',0);
        },
       img2(e){
        console.log(e.target.files[1]);
        this.readFile(e,'img2',1);

        },
       img3(e){
         console.log(e.target.files[2]);
        this.readFile(e,'img3',2);

        },

Here is my readFile method

readFile(e,img,i) {
        let self=this;
          if(window.FileReader) {
            var file  = e.target.files[i];
            var reader = new FileReader();
            if (file) {
             let type=e.target.files[i].type;   
             console.log(type);
             if(!this.cheackType(type)){
                 this.showTypeWarn('Invalid Image Formate', 'Please Upload jpg or a png file only');
                 return
             }  
              reader.readAsDataURL(file);
            } else {
             // img.css('display', 'none');
             // img.attr('src', '');
            }
            reader.onloadend = function (e) {
              self.data.img=reader.result;
            }
          }
        }

Thank you.

you need a dom ref, ex: e.target.nextElementSibling.files[0]. using id would be simplest — dandavis
– dandavis, Commented Jul 25, 2017 at 22:32

jcpaiva · Accepted Answer · 2017-07-25 22:31:34Z

1

When you do console.log(e.target.files[i]); you are accessing the i-th file of the element that fired the event. You should try with console.log(e.target.files[0]); to access the first file of each input.

answered Jul 25, 2017 at 22:31

jcpaiva

4221 gold badge6 silver badges14 bronze badges

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

1 Comment

Hkm Sadek Over a year ago

Thank you so much! I didn't think this at all. :) Thanks again !

Collectives™ on Stack Overflow

How to read multiple file inputs using FileReader API in js

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