Vue Image Upload Made Easy

Uploading images (or file upload in general) is a common requirement that can be difficult to implement. It doesn't have to be!

----------

----------

• And you should of course also follow @academind_real.

See you in the videos!

----------

[ChaseGatyas]

Always appreciate the concise and accurate tutorials but taking it a step further and showing the loading percentage was awesome. Thanks

[chris-uit-balen]

Dear Max, today I spend hours upon hours without success trying to get a file upload from Vue.js into a Laravel controller. And then, I found this magnificent video tutorial that got me sorted out straight away. Ten or so lines of code WOW! Thanks, you made my day! Chris

[panmike]

when i test, error : has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[Bundynational]

this has been one of the most helpful coding videos I have ever watched. Thank you.

[lucasb]

Is there a simple way to check if the uploaded file matches a specific file type with vue/axios or do you need to do that on the backend?

[theophilusaika]

Hi, tried to use vue-avatar-editor to crop the image while uploading it, but I'm getting base64 version of the image which may not be the best for database storage. Can't access it with FormData() either. Any help?

[alisultani]

Hi Max.
How would you send json data along with that request so you can fetch it on the server. eg Node.js using body-parser?

[hemicar]

Hi Max great tutorial. Can you tell me how can I after image is uploaded show it in the component? How do I pick the downloadURL from firebase storage and insert that as image src ?

[martinnilsson]

I can't get the @change to work. Do I need minimum version of Vue or something? It seems I can't ask the correct question on Google cause I don't find any information about this.

[Sunil-kqbx]

when i do this and click on the button it refreshes my page before it opens the file input... also upon selecting a file it doesn't call the onFileSelected(). but when i only use the input field everything works fine. what am i doing wrong here?

[monaxmonax]

I was looking for "how to keep images in server for vue", but this video expanded my knowledge about vue, ty :)

[marca]

Amazing. Your videos allow the developer to save so much time.

The refs functionality is a Bonus from this video, didn't know it at all !

Thanks.

[modevogl]

does anyone know, if the file could also be moved to a specific folder on the clients computer instead of uploading it to a backend db? my project includes a folder with 5 demo songs that can be replaced by the user (as taste is different) and i cant store everyones 5 songs on the backend, so i need to make sure the files are in that specific folder on the frontend. otherwise my functions will not work. is that possible with js?

[quanvotangky]

Where is the link to the firebase function video because I don't see them anywhere in the description?

[dayoutubegame]

you are "THE dude thanks to you i've been fixing an issue i had for 3 days, i didnt know how to properly make this sending files to the backend, i'm a noob dev i'm learning and i'm trying to finalize a project and thanks to you i'm maybe 10% closer to the end, but 10% is huge, i have less than 15 days left thankk youu!!!
i will add something for those who might have the issue i have, im working on node js, express, vue, axios, multer. i'm just gonna say this .

front:

var formData = new FormData();
formData.append('<NAME>', this.new_attachments)

back:

app.post('/upload', upload.single('<NAME>'), ...

<NAME> has to be the same, otherwise you get errors!!!

i hope some of you understand it might help

[scottmcmahon]

Is it a good idea to compress the image and resize it on the client side or the server? Also do you have any videos that teaches how to do this?

[lingting]

Hi, i have some problem on the submit the form data with optional image upload. The user can submit the form data eventhough did not choose the image/file. How can do that? Backend is laravel

[jonathanzarate]

Hi, thanks for video. I have a question.
How can send image file with axios without use formData?

[hollywoodmedia]

I havent leant more in a nine minute video than an entire 3hr video i watched thank you

[ttnghia]

Hi Max! How i can get image URL after upload? Thanks