Vue Image Upload Made Easy

Vue.js is a JavaScript framework that allows us to build highly engaging web apps.
Uploading images (or file upload in general) is a common requirement that can be difficult to implement. It doesn't have to be!
----------
Find the video and an article on: academind.com/learn/vue-js/sn...
Dive into Vue.js: acad.link/vuejs
----------
• You can follow Max on Twitter (@maxedapps).
• And you should of course also follow @academind_real.
• You can also find us on Facebook.( / academindchannel )
• Or visit our Website (www.academind.com) and subscribe to our newsletter!
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

[@ChaseGatyas]

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

[@Bundynational]

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

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

[@marca6982]

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.

[@academind]

Thanks so much, that's really amazing to read! :)

[@monax44monax]

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

[@RaymondAtivie]

Max. This was a great video. Exactly what I needed. Thank you so much

[@academind]

Really great to read that it came at the right point in time Raymond thank you very much!

[@wduandy]

I love it! The firebase functions was a new thing for me! Thank you.

[@hollywoodmedia2023]

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

[@clintjames5666]

I started my Vue.js path based on your vids. Thank you and keep up the great work, Max!

[@academind]

Thank you very much for sharing this Clint, really means a lot to me to read that my videos are part of your Vue journey :)

[@DiegoTejada]

Extremely punctual and easy, thank you so much Max!!

[@academind]

So happy to read that Diego, thank you very much for your comment!

[@Manusaurius]

Omg, thank you so much for this tutorial. I was stuck in file upload with vue and this save my work. Thank you.

[@academind]

Thank YOU for your awesome feedback Manuel :)

[@SHISHIRLIKESIT]

Thanks for the tutorial. You really made it simple!

[@panmike138]

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

[@hemicar92]

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 ?

[@dayoutubegame1725]

you are "THE MANNNNNN" 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('',this.new_attachments) back: app.post('/upload', upload.single(''),... has to be the same, otherwise you get errors!!! i hope some of you understand it might help

[@tomosterlund6497]

This was very helpful! Sometimes I spend an hour or even a few on stackoverflow trying to solve a problem. Then sometimes after a 10-minute video from you, or after shortly going back to one of your courses => problem solved.

[@abelherrera722]

you made it simple and fast, thanks!

[@jojojawjaw]

So, like I leave a like right after I start any vid on your channel, even before seeing it; your tutorials are awesome, man. YOU are awesome.

[@academind]

Thanks so much for your absolutely fantastic feedback and for your great support Sarah, YOU are awesome :)

[@mindfluxmindflux6306]

more and more often I end up on your channel, thx for the great videotutorials!

[@academind]

Happy to have you on board, thanks a lot for your great feedback!

[@chris-uit-balen]

I saw you have an extensive course program; so I just enrolled for the Vue.js course! Good value for money, thanks!

[@anthonypetruzzi158]

OMG!!! Talk about easy and well explained. Echoing Marc A. that the refs portion blew my mind 😍😘🥰

[@alisultani1182]

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?

[@scottmcmahon7209]

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?

[@lucasb773]

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?

[@quanvotangky8118]

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

[@ultrasamad]

Hi Max thanks for the tutorial. When uploading image to aws with laravel as the backend and using axios with vue, I find it difficult implementing the progressbar. If it's however from axios straight to aws it's pretty clear. Can you show how this will be done with Laravel. ie axios => laravel => aws. Thanks.

[@Vlad-em1bx]

Thank you for the video. It helped me solve my problem.

[@seoyunjung9431]

How nice and clear! Thanks for your tutorial

[@BikingBas]

Great video! Only, I don't have the firebase cloud function that you show. How can I make sure to get it? Do I need to write it myself or is there a plugin I can download or something?

[@theophilusaika1215]

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?

[@martinnilsson2145]

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.

[@dirceudev2697]

Very good! It's a very clear explanation. Great! Thank you!

[@isaacaranas5156]

Hey great Tutorial!!! Please do more!!! Thank you!!!

[@ttnghia195]

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

[@jesuserwinsuarez65]

This is great! thank you.

[@abeebayinla4858]

Thanks for this video. What if in the case where an API endpoint is expecting the file in form of binary how do you go about it.

[@alsemany]

Thank you so much that's helps me a lot

[@IlIlIlIIIlIll]

Aha but what if I wanted a custom button? Done. but what if I wanted to get the upload progress? Done This tutorial is truly epic

[@sanyuktakate4099]

Thanks for this video. How can we display/preview the image immediately after uploading it? As in how can we access the url stored in AWS or any other server?

[@danielnavarro7447]

Thanks for the tutorial, it really helped me :D very helpful!!!

[@Sunil-kq9bx]

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?

[@crashoverride9681]

Very clear and nice explaining! Respect bro! You are teacher of 80 level! =)

[@academind]

Very happy to read that, thanks a lot :)

[@jonathanzarate7255]

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

[@PabloGaraguso]

Excellent. Clear and to the point. Good video. Thanks!

[@academind]

Happy to read that you liked my explanation Pablo, thank you very much!

[@wilfredmacaulay5797]

Great tut as always. Way to go Max!

[@academind]

Thank you very very much Wilfred :)

[@manojthayil7836]

Amazing Video Max. Do you know any popular Vue Plugin , that you might have used in the past for file upload.

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

[@salinderru]

Max thank you !!! You are the best!

[@leandrorodriguez5134]

I have a very important question, which is the type that you recive on the server? IFORMFILES?, because it's doesn't work! I have this problem when i send from parameter the formdata: "file": [ "Could not create an instance of type Microsoft.AspNetCore.Http.IFormFile. Type is an interface or abstract class and cannot be instantiated. Who is the code to recive this formdata in your api? Have you an example? Thks

[@EldaldGael]

if you want upload image from server django (django rest framework) only use multiparse and formparse

[@ashankraju1043]

Which platform u were using

[@lingting9790]

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

[@johnrobertsonnocos2996]

Hey Max! Awesome tutorial once again!

[@academind]

Thanks a lot John!

[@midhunmohan5112]

I am not getting response from server, {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …} Only this thing, what should I do? Image is entering in database, but response is null

[@slaincore]

Hello from CIS :), your lessons are awesome!

[@academind]

Thanks a lot, so great to read that!

[@hamadasaidi9202]

your Videos so far Helped me alot thanks man !

[@academind]

That's so cool to read Hamada, thank you very much for your comment!

[@nightlifeking]

What a well done video! Bravo!

[@touch5094]

Hi, Do u know how to upload file vue laravel without append form data ?

[@anuwatjantarawong9557]

Understood,This is great! thanks.

[@evgenybaraboshkin2375]

Thank you! And what is the way to download the file back?

[@ozanmuyes]

Hi Max, thanks for the video. I am wondering about the lag between 100% and response console logs. Is it because the Firebase (cloud functions to be exact)?

[@academind]

Indeed, the file needs to be stored on the Firebase servers after it was uploaded to the cloud function - that's basically the extra time you have to wait.

[@placidwaves]

Any reason why FileData object would be empty after calling append?

[@Xiaoxooooo]

Thank you so much for this great tutorial!

[@academind]

Happy to read that you like it Mark, thank you very much!

[@kalankasiyambalapitiya7615]

Thanks Max for the vid ....can you do a video for separation of service layer for this one ...cheers!!!

[@RealWorldMusicTheory]

Great video - right to the point! Thanks! Is there a reason why you use a custom cloud function instead for fireball.firestore() directly? I would fear that using custom Ajax calls might break things like offline functionality for firebase, because it can’t handle caching and syncing for custom Ajax calls.

[@academind]

I simply wanted to show a generic approach, not one only working with Firebase. I just used Firebase as it's easy to set up and doesn't require me to write a lot of boilerplate backend code.

[@ritimodoscrias7025]

voce sabe me dizer se e possivel mostrar a imagem antes de enviar pro firebase?

[@kelvinzhao4960]

Is it possible to use fetch to do this?

[@ponchonolasco1496]

Thank you, this video has really helpful to complete a task.

[@academind]

That's great to read Poncho, thank you very much for sharing this!

[@k9999k1]

Do you have any video to upload file from laravel6 to s3 aws?

[@dalandan8300]

Thank you. Its very helpfull and easy to understand. I subscribed because of this

[@academind]

Thanks for the sub!

[@jorgebee65]

Do this works from a mobile device?

[@LucTemetNosce]

Great tut. Thx

[@jackb6106]

Does this work with firestore?

[@taewookkang2121]

This is so cool!! thanks a lot

[@CarlosCasalicchio]

I'm using vue-resource, and got the console.log(%) working, but I want to update an HTML progress bar. How can I access it? The this.percent and this.progressBar are not really updated this.$http.post(`${process.env.ROOT_API}${this.photo_endpoint}`, formData, { headers: { 'Content-Type': 'multipart/form-data' }, progress (e) { if (e.lengthComputable) { this.percent = Math.round(e.loaded / e.total * 100) this.progressBar = this.percent + '%' console.log(this.progressBar) } } } ).then(response => { ...

[@dipeshhkc]

Awesome Max :) ......waiting for other vuejs related videos

[@academind]

Thank you very much! I'll probably release more Vue videos in the future (got no concrete plans right now though).

[@israelsousa]

Amazing, thanx for the video

[@anonymousghost5384]

In django should we use request.FILES??

[@adeosunoluwafemiomoniyi]

MAX, if you by chance visit Nigeria, know that you have a big fan. Your videos are :fire:, super great. Thanks for doing what you are doing. By the way, pls come visit Nigeria.

[@academind]

Thank you very much for your great comment! Unfortunately I won't be able to visit Nigeria in the near future, but greetings from Germany :)

[@twinsSpark]

Amazing max. please make a video with cloudenery image upload.

[@TheKidrock1988]

this.selectFile = event.target.file[0] showed me this error {Cannot read properties of undefined (reading '0')}.

[@aditigupta1469]

Hi Max! Great tutorial! Is there any way to show upload progress in a bar instead of showing percentage in the console?

[@academind]

You can of course manually translate it. Update some Vue instance data property and then write some template code to update some CSS styles based on that

[@webnostix5256]

Max another great video thanks, One question though. I followed your REST API tutorial series and wanted to test the file upload with that. The only issue is that I am having issues sending the bearer token in the header to authenticate using axios. Any pointers with that would be greatly appreciated - best :-)

[@academind]

Do you have issues with attaching it to the Axios request or handling it on the server? Attaching it should be possible via axios.post('url', data, { headers: {Authorization: 'the-token'}}

[@webnostix5256]

i used axios.post('url', data, { headers: {Authorization: 'Bearer' + 'the-token'}} the same as in postman, but get a 404 error, is this wrong?

[@bttstudio5543]

Thanks for the video, really informative. I have a request, can you do a tutorial of file upload with vue filepond and laravel?

[@bladimirHC15]

alguien sabe que ruta debo de poner, eh puesto una hacia mi carpeta images, pero me da error

[@maskman4821]

This is really awesome !!!

[@nicoladivenere8353]

Where is the video to create the function?

[@m3rl1on]

but what if i want to upload multiple images?

[@patelsiddhant994]

Thank you

[@JoelPiccoli]

Great video man! Thanks a lot!

[@academind]

Happy to read that you like it Joel, thanks a lot for your comment!

[@danielouattara3857]

Merci beaucoup. Super !

[@micheleckhardt6067]

Do you can send the code to the github?

[@benhummer185]

Thanx, man!

[@123deplsmiei]

hey! What are the font and the theme which you're using... I also want the text color contrast. I'm one of your student from Udemy!

[@academind]

I use this VS Code setup => academind.com/learn/web-dev/visual-studio-code-introduction/#our-visual-studio-code-setup

[@ritimodoscrias7025]

Please, helpme, how use with cropper,js?

[@last_hope_hero]

Lot of thanx comrade ! )

[@laagodfather4435]

I love you man thanks a lot

[@kalmenchia]

Thanks , the sharing is very helpful. May i ask , if i wish to encode the upload file to a base64 before upload it, how can i do that ? is there any example of how this can be done in vuejs , the process is the same , the user pick the file , click the upload button, but it will upload it as a base64 string .

[@TheBlackWarriorLP]

i need this too

[@rx596]

Great tutorial Max, it helped me a lot! Has someone told you how much you look like Officer Hopper from Stranger Things? xD

[@academind]

No, that's new to me, I just know the Seth Rogan comparison :D

[@shahmirjadoon1322]

MAX, how many years should I spend to be like a Maximillian 2 ?? You are awesome ... Max help us in uploading multiple images and also preview images before upload. It will really be helpful

[@academind]

I spent 15 years ;) Just kidding - thankfully I still learn so much every day, that's what web development is all about in the end. Keep on learning. Happy to hear that I can help you with that a bit :)