Uploading Files With VueJS and Axios

Originally published at: Uploading Files With VueJS and Axios - Server Side Up

Handling files is always a task. This tutorial will simplify the process and show you how to upload files with VueJS and Axios through AJAX.

We migrated this post from Disqus to Discourse. Here is a screenshot of the previous comments for reference:

Thank a lot for this article.

Performance wise could you kindly tell me how impactful is to process multi-file comparing these two approaches below?

// 1st approach
data.append('photo[0]', myFileInput.files[0]);
data.append('photo[1]', myFileInput.files[1]);
data.append('photo[2]', myFileInput.files[2]);
// 2nd approach
// https://developer.mozilla.org/en-US/docs/Web/API/FormData/append#example
data.append('photo[]', myFileInput.files[0], 'photo0.jpg');
data.append('photo[]', myFileInput.files[1], 'photo1.jpg');
data.append('photo[]', myFileInput.files[2], 'photo2.jpg');

I am eager to read of your point of view about pros and cons of these two way of doing multi-file upload.
Thank again.

@garata ,

What kind of processing are you looking to do? Like validation on the web side or server side?

There shouldn’t be much difference between the two. The first just explicitly assigns a key to the file which will allow you to access it in a validation. This only occurs IF you have a known amount of files. Otherwise you won’t know the relationship between index and file.

Let me know what you are looking to do and I can help out!

Many thanks Dan.

So to sum up in both cases the server side (in my case PHP Laravel) sees the list of files a multiple file upload. My first attempt was to propose <input type="file" id="fileupload" name="fileupload[]" multiple> as formData.append also works properly in case of DOM node with multiple values like this implementation. And yes I was supposing to validate multiple dynamic input filename (longer descriptive field) created on client side.

let formdata = new FormData(); //FormData object
let fileInput = formElem.getElementById("fileupload");
let fileNames = formElem.querySelector("[id^='filename']");
let fileDates = formElem.querySelector("[id^='filedate']");
//Iterating through each files selected in fileInput
for (let i = 0; i < fileInput.files.length; i++) {
  //Appending each file and filename to FormData object
  formData.append('files[]', fileInput.files[i], fileInput.files[i].name);
  //Appending filename and filedate as serialized array of strings
  formdata.append('filename', fileNames[i]);
  formdata.append('filedate', fileDates[i]);
// Creating an XMLHttpRequest and sending (omitted)

In some specific case, with some modification to the logic implemented, with the approach above you can also upload files with parallel AJAX calls or sequenced using promises.

Also if you want you can mix your approach with indexed form descriptive fields as well.

Thank for your point of view and for further suggestions.


@garata You could definitely do multiple dynamic fields. If you are pairing the field with another, then I think the indexed method would be the safest. Especially in the multiple promise scenario so you can explicitly handle responses from the server and display messages to the user.