DEV Community

File upload using Laravel and Vue.js (The Right Way)

Diogo Kollross on March 08, 2020

Ways to upload a file Most articles showing how to upload a file using JavaScript actually teach how to encode the file contents in Base...

Read full post

Samuel Coll • Jul 27 '20

Thanks for this! Very useful. For anyone else who had trouble handling the request data on the Laravel side, I had to set the Content-Type header in the Axios post method to application/json before I could decode it in the controller method.

85 • Aug 18 '20 • Edited

A lot of React Native examples advise to just append the photo form data, as an object:
github.com/g6ling/React-Native-Tip...

How would this work since you mentioned every object needs to be stringified?

PS: Their examples don't work for me, so that would confirm. Laravel does not "understand" a "photo object: { uri, type, name }", $request->file('photo') returns null.

85 • Aug 18 '20

Found it. photo.name cannot be null, undefined, ...... If not Laravel does not recognize the photo field as an Illuminate\Http\UploadedFile... Damn it.

Fernando Cueto • May 14 '20

Thank you!
Thank you!
Thank you!
Thank you!
Thank you!
a thousand of Thank you!
I had two days struggling with this.

Diogo Kollross • Jul 29 '20

I'm glad it was useful to you!

garata-sm • Sep 22 '21

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.

Bilal Haidar • Jul 23 '20

Hello Diogo,

If you have complex data as arrays or nested objects, you will have to convert them to JSON manually.

Why is that?

Diogo Kollross • Jul 29 '20

Because when making a request encoded as multipart/form-data (which is a requirement for file uploads) all you can send is a flat list of name=value pairs - where value may either be a string or a file.

If you try to add an array or an object directly to the FormData object, it will be implicitly converted to a string, which is probably not what you want (resulting in, for example, "[object Object]" or "12,15,28,55").

Regis • Feb 13 '21

This has been SO useful. I've been trying to make file upload with Inertia work for a few days now and I couldn't find the proper solution.
Thanks so so much.