Axios upload progress with progress bar tutorial

hello and welcome to this video tutorial so in this one i'm going to be showing you how you can track the progress of an upload that you make with axios and also how you can create a progress bar so you can display that progress to a user so to demonstrate i've already imported axios via a cdn link in the head of this document i've applied a little bit of styling already just to center the content nothing more than that and add a little bit of margin around the form and all i have in the body is this form so i've included the form here so i have something to upload and the form contains two elements and input of type file so that's going to allow me to browse my system for a file that i want to upload and i'm specifying that i will accept a png or jpeg file for uploading and i've given that an id of file so i can select it easily in javascript and the only other element is a button of type submit so this button is going to trigger the submit event for this form when it is clicked now down below i'm going to create a progress bar that is going to be updated as the upload progresses so i'm going to create a div so i'm going to nest it in there so the progress bar is going to be a html progress element and you need to specify two attributes here the first one is the current value so this is specifying how much progress has been made with the upload in this case and also a maximum value which is the value that value needs to reach for the progress path to show full so i'm going to be calculating the progress of the upload in percentages a little later so i'm going to set the max value to 100 and finally for this element i'm going to give it an id so i can select it easily in javascript so i'll call it progress bar and i'm also going to create a label for the progress bar so the label is for progress bar and to begin with i'm going to set the value of the label to zero percent i'm going to be updating this value in javascript as the download progresses okay so that's it for the html let's have a look in the browser now okay so here you can see our input element i can already choose a file i can't send it anywhere yet but that's working and we've got this button that's going to submit the form so you can see that the progress bar is showing no progress at the moment and we've also got the percentage display as well so just to show you if i set the value of the progress bar now to 50 this will show half progress and that's how we're going to be updating the progress bar we're going to be manipulating the value of the value attribute of the progress bar via javascript i've reset the progress bar now so it's back at zero now we're ready to start adding some javascript okay so the first thing i'm going to do in javascript is to select some of the elements so i want to select the form i'll give that an id of form and i'll select that now by that id i've given to it form and i'll save that in a variable called form and second i want to select the progress bar so i'll reference that under the name bar in javascript and in html it has an id of progress bar okay so the first thing i'm going to want to do is to handle the submission of the form so to do that i'll say form dot add event listener and i'm listening out for a submit event on the form and when that occurs this function's going to fire and the first thing i'm going to want to do is prevent default so the prevent default method on the event object that's created and that way the page doesn't refresh and i don't want it to refresh because i'm handling the submission of the form with javascript okay so when you're preparing a form for upload a good idea is to create a new form data object so you can do that by using the keyword new before the special form data object and that's going to create a new instance of that so i'm going to call this form data now with textual data i could just pass in form here and form data would create a new object that i could send like that as the payload but because there's an image attached or rather because there's going to be an image attached i need to do a little bit more work so what i need to do is to select the file that the user wants to upload so i'll do that first of all it has an id of file now if you want the user to be able to upload multiple files you can add the multiple attribute to the element but i'm just going to keep it as one file for now so with only one file the index of zero is always going to be correct as long as the user has actually attached a file okay now finally for the handling of the form i want to append this file to form data so i'm going to save it in a new variable and then i call append on form data and i need to specify what type of file it is i'm appending so in this case it's an image and i need to reference the file in the second position so now form data is my payload and it's ready to be sent and i'm going to be sending that with axios so i already have access to axios because i posted the cdn link in the head of my document so i can access the library via the axios object and this is going to be a post request now as an end point to post to i'm going to use the publicly available test endpoint provided by http bin so it's httpbin.org forward slash post so axios is going to return the result of a promise if successful i can handle that with the top there method so you pass in a function here you have the result available to you as a parameter and i'm just going to log that to the console if successful and if it's not successful then it will fire the catch statement which i'm going to again just log the error to the console if there is one and i still need to specify a payload for this post request so you pass that in in the second position our payload is form data okay so before i show you how to track the progress of the upload and also update the progress bar let's just check that this post request is working in the browser okay so i'm going to select the image again and now when i click upload hopefully i should get a response back in the console from the server letting me know that this works okay okay so everything seems to be working fine the status code is 200 meaning that it was a good request now let's move on to tracking the progress of the upload and also updating the progress bar okay so the way that you can track the progress of the upload in axios is by specifying that's what you want to do and you do that by passing in a configuration object in the third position so i still need to create that object so let's do that now so it's a custom object in javascript and what you need to do is to create a property with the exact name on upload progress so this is a property recognized by axios and it will send information about the progress of the upload via this property now the value of this property should be a function and within this function you have access to the data on the upload via a parameter now you can call it whatever you want most people call it progress event by convention so i'm going to stick to that so the way that this works is that this function is fired every time there is some progress on the upload so the way that this works is this function is fired every time there is some progress on the upload and you have access to data about the progress of the upload via the progress event object so to calculate the percentage progress of the upload every time this function fires you are going to need to access two properties on progress event the first one is loaded so this is specifying how much has been uploaded already and the second one is the total so the total file size now each time this runs you're going to want to calculate the percentage of the upload that's complete so i'm going to create a new variable here percent completed and this is going to be a calculation so i'm going to divide progress loaded by progress total okay so at the moment percent completed we'll express the percentage completed on a range of zero to one but my progress bar has a range of zero to 100 so what i'm going to do is multiply that calculation by 100 so it's on the same range as my progress bar okay so now i'm ready to program the updating of the progress bar so i do that by setting the value attribute on the progress bar and i want that to be percent completed so this function is going to fire each time there's progress on the upload calculate the percentage completed and set that to the value of the progress bar and i also have an attached label so that's this label here and this doesn't have an id but i can get it by traversing the dom from the progress bar to the previous sibling so i'll do that now bar previous element sibling because it's an element and then text content and i'm going to set the text content to that's going to be percent completed and a percentage sign afterwards now optionally you can do something when the upload is fully complete so you can do that with an if statement that's going to check if percent completed equals 100 and if it does then you can do your thing here so what i'm going to do is to set the label text attached to the progress bar to upload complete okay so just to review this process again we attach the image to the form data object so our form data object is the payload then we're posting this payload in the second position using axios and we're passing in a config object to the post request in which we are specifying that on upload progress we want to calculate the percentage completed update the value attribute of the progress bar and also update the label attached to it and once the download is complete that is when the percentage completed is 100 we're going to set a message of upload complete in the label so let's head over to the browser now to see this all in action okay so let's test if everything's working i'm going to attach my file now this time when i click upload we should get a status update on the progress of the upload via the progress bar and also via this percentage display text so let's see if that works okay so the good news is that the progress bar is updating just fine and the display text is updating also but we need to round that number because it's far too long we don't need to be that precise but i can easily fix that with math.round okay when it's complete we should get the upload complete message okay so everything's working fine now you'll notice there's some delay in getting a response from the server here and this is because the way this test endpoint works is it mirrors whatever i send it so it's sending the image back to me that i sent to it and this takes a little bit of time but you can see the image is there um i can't access it the string is too large to edit but that is included in the response so everything worked just fine all i need to do now is to resolve that issue with the percentage display so the way i'm going to do that is i'm simply going to round whatever the outcome of this calculation is okay so i'll test this again now choose the file click upload and hopefully now yeah there's no decimal point on the display percentage now a little trick if you have a very fast internet connection then the upload may happen too fast for you to see a percentage happening here but you can simulate a slower internet connection by going to the network tab and then adding some throttling so you can simulate for example a slow 3g connection so if i do the upload again now you'll see that it's happening much slower now so this gives me a much better chance to see the progress bar in action okay so that is it for this tutorial i hope you found it useful if you did please consider hitting the like button down below this video and if you'd like to see more content like this don't forget to subscribe to the channel

Channel: OpenJavaScript

Views: 11,337

Keywords:

Id: nC3ntJUQrAM

Length: 15min 16sec (916 seconds)

Published: Tue May 31 2022