Multiple file upload with Vue and Axios

Question

I have some problems with uploading multiple files in Vue with Axios. The problem is that the FileList always returns a length of 0, even if I select multiple files.

I have a button which opens a File Upload:

<v-icon @click="attachFile(user)">fas fa-paperclip</v-icon>

The function it calls:

attachFile(user) {
  document.getElementById(user.id).click();
},

The form input it refers to:

 <input
    :id="item.id"
    name="files[]"
    type="file"
    multiple
    hidden
    ref="files"
    @change="handleUpload()"
 />

And then in the handleUpload() I want to make an axios call to upload the files.

handleUpload() {
  this.files = this.$refs.files.files;
  console.log(this.files);
},

But this.files always returns a FileList with the length of 0. I already set the file data in the function:

 data: () => ({
    files: "",
  })

Aer0 · Accepted Answer · 2019-12-17 10:13:44Z

4

As far as I can see your attempt seems to be fine basically. The error might be in your $ref itself. Instead of using a reference, you might solve your problem by simply accessing the passed in event in your function handleUpload(). You could achieve this by something like this.

handleUpload(e) {
  console.log(e.target.files);
}

This should probably work. A working example could be found here.

answered Dec 17, 2019 at 10:13

Aer0

3,91720 silver badges35 bronze badges

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

Comments

Stepanov Max · Accepted Answer · 2020-08-24 11:42:04Z

1

Maybe this will help someone(not for the author, because I see that he avoided my mistake). I used an event 'click', but have to use a 'change' event. This thing has stoled a couple of hours from me.

answered Aug 24, 2020 at 11:42

Stepanov Max

1593 silver badges5 bronze badges

Collectives™ on Stack Overflow

Multiple file upload with Vue and Axios

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related