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...
Collapse
 
distalshores profile image
Samuel Coll

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.

Collapse
 
garatasm profile image
garata-sm

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]);
Enter fullscreen mode Exit fullscreen mode
// 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');
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
eightyfive profile image
85 • 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.

Collapse
 
eightyfive profile image
85

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

Collapse
 
fernastereo profile image
Fernando Cueto

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

Collapse
 
diogoko profile image
Diogo Kollross

I'm glad it was useful to you!

Collapse
 
bhaidar profile image
Bilal Haidar

Hello Diogo,

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

Why is that?

Collapse
 
diogoko profile image
Diogo Kollross

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").

Collapse
 
mahdipishguy profile image
Mahdi Pishguy

what should be photo in html?

Collapse
 
djaiss profile image
Regis

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.

Collapse
 
christiandave_abina_d295 profile image
Christian Dave Abina

Thankyou very much!
This help me a lot in my project.

I Salute you brother!

Collapse
 
joneyspark profile image
Joney Spark

How to Upload pdf, xls, xlsx, doc, docx in Laravel and Vue.js ???