Upload multiple file with vue js and axios

Question

I am trying to upload multiple images using vuejs and axios but on server side i am getting empty object. I added multipart/form-data in header but still empty object.

submitFiles() {
    /*
      Initialize the form data
    */
    let formData = new FormData();

    /*
      Iteate over any file sent over appending the files
      to the form data.
    */
    for( var i = 0; i < this.files.length; i++ ){
      let file = this.files[i];
      console.log(file);
      formData.append('files[' + i + ']', file);
    }

    /*`enter code here`
      Make the request to the POST /file-drag-drop URL
    */
    axios.post( '/fileupload',
      formData,
      {
        headers: {
            'Content-Type': 'multipart/form-data'
        },
      }
    ).then(function(){
    })
    .catch(function(){
    });
  },

HTML:

<form method="post" action="#" id="" enctype="multipart/form-data">
    <div class="form-group files text-center" ref="fileform">
        <input type="file"  multiple="multiple">
        <span id='val'></span>
        <a class="btn"  @click="submitFiles()" id='button'>Upload Photo</a>
        <h6>DRAG & DROP FILE HERE</h6>
    </div>

My Server side code:

class FileSettingsController extends Controller
{
    public function upload(Request $request){
        return $request->all();
    }
}

Output:

{files: [{}]}
files: [{}]
0: {}

Console.log() result: File(2838972) {name: "540340.jpg", lastModified: 1525262356769, lastModifiedDate: Wed May 02 2018 17:29:16 GMT+0530 (India Standard Time), webkitRelativePath: "", size: 2838972, …}

did you figured it out? im having the same problem

Marcelo Fonseca
– Marcelo Fonseca

2019-09-03 13:25:39 +00:00
Commented Sep 3, 2019 at 13:25 — Marcelo Fonseca
– Marcelo Fonseca, Commented Sep 3, 2019 at 13:25

Daniel · Accepted Answer · 2022-12-20 19:23:02Z

33

You forgot to use $refs. Add ref to your input:

<input type="file" ref="file" multiple="multiple">

Next, access your files like this:

submitFiles() {

    const formData = new FormData();

    for (var i = 0; i < this.$refs.file.files.length; i++ ){
        let file = this.$refs.file.files[i];
        formData.append('files[' + i + ']', file);
    }

    axios.post('/fileupload', formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        },
      }
    ).then(function(){
    })
    .catch(function(){
    });
},

This should be works.

edited Dec 20, 2022 at 19:23

answered Feb 4, 2019 at 16:18

Daniel

2,7772 gold badges22 silver badges37 bronze badges

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

5 Comments

Daniel Over a year ago

What about dd($request->file('files')) in your controller? What output have you got?

weaver Over a year ago

array:1 [   0 => UploadedFile {#756     -test: false     -originalName: "540340.jpg"     -mimeType: "image/jpeg"     -error: 0     #hashName: null     path: "C:\xampp\tmp"     filename: "php44C8.tmp"     basename: "php44C8.tmp"     pathname: "C:\xampp\tmp\php44C8.tmp"     extension: "tmp"     realPath: "C:\xampp\tmp\php44C8.tmp"     aTime: 2019-02-04 16:32:27     mTime: 2019-02-04 16:32:27     type: "file"     writable: true     readable: true     executable: false     file: true     dir: false     link: false     linkTarget: "C:\xampp\tmp\php44C8.tmp"   } ]

Daniel Over a year ago

So you got it, now you need to store them.

Cak Bud Over a year ago

if there are fields that contain strings how do we combine them?

Daniel Over a year ago

@AhmadBudairi, you have to append data with the string value, ie. formData.append('title', this.form.title);

Ahmad Hassan · Accepted Answer · 2020-03-31 05:45:52Z

4

If anyone wondering, "How can I send also data with it", there you go:

formData.append('name[' + this.name + ']', name);
formData.getAll('files', 'name');

edited Mar 31, 2020 at 5:45

user11422223

answered Mar 31, 2020 at 4:28

Ahmad Hassan

538 bronze badges

Comments

goodgrief · Accepted Answer · 2022-11-25 07:41:06Z

2

For Composition API this should work:

const files = ref([])

function save() {
  let formData = new FormData()
  for (let file of files.value) {
    formData.append('files', file)
  }
  axios.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  })
  .then((response) => {
  })
}

answered Nov 25, 2022 at 7:41

goodgrief

4081 gold badge9 silver badges27 bronze badges

1 Comment

Brendan Over a year ago

For Laravel, at least, it seems I can't just send multiple "files" and I have to manually add an array notation, i.e. files[0] ... files[3] while using append.

Collectives™ on Stack Overflow

Upload multiple file with vue js and axios

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related