Uploading Files With VueJS and Axios

⚡️ Latest Posts & Comments
1

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.

2

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

Screenshot_2021-05-05 Uploading Files With VueJS and Axios - Server Side Up
Screenshot_2021-05-05 Uploading Files With VueJS and Axios - Server Side Up1624×16638 1.04 MB

3

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.
Regards.

4

@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!

5

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.

Regards.

6

@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.

7

Hello,
Thanks for this treasure :slight_smile:
I wanna ask. can we do the same to upload a video in laravel 8 and vue 3
Thanks

8

Hi @Arsiii ,

Yup! I just launched this article, built on the same principles: Preview Video Before Uploading with HTML5 and VueJS - Server Side Up. It allows you to preview the file before uploading, but you can just submit it and it will work. The examples work in Vue 3 as well and have used it with Laravel 8 in the past.

1 Like
9

Thanks, @danpastori.
I appreciate your efforts it means alot
thanks again

1 Like
10

@danpastori Thanks a lot for this. How can I have it descend the directory tree (so upload all the files in all the directories? Also, trying to figure out how I could use PUT instead of POST to use with S3 pre-signed URLs.

11

Hi @carmi!

Are you talking about dragging an entire folder to upload? To be honest, I haven’t done that. I’d assume it’d have to work with multiple file uploads in some way.

As for using PUT, you could send a POST request with a piece of data named _method and set it to PUT. It will then send to S3 as PUT.