Vue Image Upload Made Easy

welcome to this video great to have you here in this video i want to show you how you can upload files from within your view application so how you can allow the user to select a file and then ship it to some restful api endpoint you got somewhere let's dive right into it of course to demonstrate file upload we need a view application so i created a new one with the view cli i used the webpack template and i didn't change anything now in this application we by default get this app.view file where we simply got router installed load this hello world page and this is the page i'll work in so i'll simply clean everything in there so that i just have this div and you could change the styling and everything but i don't care i want to quickly add my file input field add a button that allows me to upload it and show you how to upload a file let's start simple though let's start by adding an input field of type file which is a default html element nothing viewers about it the view part is that i will now add an event listener add change that will trigger whenever the user selects a new file and then i want to execute let's say on file selected this method now i will have to add this in my view instance in this component here so i'll add the methods object on file selected and there i will actually get my event and let's for now simply log it to the console to see what's inside of it if i now save everything and i go back to my app we can ignore that warning with the extra space that's missing and simply choose a file here if i click this and add a file you see an event as output down there and this file here is actually holding the normal event object with the target which is the file input but we got one useful property the files property which is an array of all the files that the user chose you could add a multi-select tool here too here i only got one file so it's the first element in this array and that is the file we can upload so the goal is to then store that file right so in my data object here i'll replace message with selected file and initially that's null in on file selected though i'll set this selected file equal to event and then it was target files and then there first the first element there this is the file the user selected now we stored it here but we want to upload it right now for that i will add a button where i will say upload and where i will add a click listener to execute on upload or whatever name you want to give to this method so i'll then add my on upload method here which takes no arguments and here i now want to send an http request to some api endpoint that accepts the file we could send the file in both a binary format or as i will do it as part of form data which is a javascript object meant to mix normal fields and files and pack it all into one request body and send it to the backend now you might have your own backend i will use a function of firebase cloud function i built in this video link is also in the video description this firebase cloud function accepts foreign data and stores a file on the firebase cloud storage so that is what i will use and for that i will access my firebase console of that project and first of all remove all files i have in the storage so that we can really see that it worked and then i will go to functions here are all the functions i created and i will use that endpoint of my http function now you won't be able to use that because that project will have been deleted by the time you're viewing this but you can of course build your own function by following that video i mentioned so here i'll copy that endpoint and with that we need to send a request right and how do we do that i will install a special package for this i will use npm for that npm install dash save axios access is a third-party package not related to view which simply makes it easy for us to send ajax requests that's the idea behind access thereafter i'll restart my development server and now i can simply import axias from axios in this view component here now with that imported i want to use it here in the upload on upload function i can use the post method to send a post request and here i first of all need to specify the url which is the url i just copied the second part then is that i will need to set the data i want to send and as i said i want to send forum data because this is the format my backend here expects so i'll create a new constant fd initialize a new form that object a form data is a default javascript object we don't need to import or install that and then i can call append to append a new piece of data to that form data object i'll give it a name of image name is up to you and the value will be this selected file so the file the user picked which we then stored and i'll also keep the file name i'll take it from this selected file there will be a name property which is the original file name with that we get the form data prepared we can now simply add it as a second argument here and then chain up then call because axis will return a promise and there we should eventually get a response which i'll simply log to the console if i save this and we reload our application if i now choose my file here and i clear the console and then hit upload it takes a while but then we should see a response here it is status code 200 looks good data holds it worked that is the response my firebase backend gives me if it worked and if we visit the storage on my firebase backend i indeed see the file and another file because of another cloud function which automatically transformed that file but this is now working this is the file i picked and i uploaded now that's great but let's enhance this let's say we want to see the progress whilst this is uploading especially useful for bigger files of course access makes this easy we can pass a third argument to the post method this is an argument where we can configure this request by passing a javascript object and there we can add the on upload progress event handler so to say here we simply store a function where we get the upload event and now we can simply console.log upload progress and the upload event has two important fields the first one is the loaded field this is holding a number in bytes how much we upload it we can divide this by the second important field upload event total that is the total amount we want to upload so by dividing loaded by total we get the percentage essentially now we can use math round on that but not on that like this but instead let's multiply it by 100 to get a full integer and i will then simply append percent at the end now this should also give me percentages whilst it's uploading the file let's try this out let's clear the console and pick a file and let's press upload and you see we get the upload progress percentages and then after a while also the response so that's pretty cool and this is how easy it is to upload a file now when everything you sometimes want to do is you want to hide that input element and instead have some button where you maybe say pick file and that button should then trigger this input you can do this by first of all setting the style and set display to none here to not show this input and now we want to basically proxy a click on this button to this input here now this is done relatively easy we can use a feature by vue.js called refs we can add the ref key here and assign this a name by which we then can access this element like file input and then on the button we can add a click listener and set this equal to dollar sign refs which is an object in which view manages all the refs you set up with the ref key and then file input and now i can simply execute click here to proxy my click on that button to that input f as if the user had directly clicked on it now if i save this i clear the console and i click on pick file i open that file picker through that button and i can still upload that file just as before and this is actually it this is how easy we can implement all kinds of things related to file upload in a view app so i hope this was helpful it helps you with your next project would be awesome to welcome you to future videos have a great time bye you

Channel: Academind

Views: 170,391

Keywords: vue, vue.js, image upload, file upload, axios, vue tutorial, vuejs tutorial, vue.js tutorial, vue course, vuejs course, vue.js course

Id: VqnJwh6E9ak

Length: 9min 51sec (591 seconds)

Published: Mon Feb 19 2018