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
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
 
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
 
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
 
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 ???