Download Progress Bar with Axios – JavaScript Tutorial

hello everyone and welcome to this tutorial so today what I'm going to be showing you is how you can track the progress of a download you're making with axios and use that information to update a progress bar on screen so I've got a basic setup here where every time the page loads an image is being downloaded from the unsplash API using axios so when I refresh you'll see a loading bar on screen letting you know how much progress has been made and this is a pure CSS loading bar so it's not the browser implementation and the good thing about a prcss bar is that it's going to be consistent across browsers so this is what I'm going to be showing you how to implement in this tutorial so let's get started with how you can track the progress of a download in axios before we move on to the progress bar itself okay so the first thing you're going to need to do is of course import ncos into your project because it's a third-party Library so I'm doing so here via a CDN link and the CDN link is coming from cdnjs.com so if you search for axios up here you will be able to easily find this page as the first one that comes up so once you've imported it either by CDN link or installing it locally in your project folder then I should have access to the axios object which has all the methods needed for making HTTP requests on it so you see that it's returning a function here so the import definitely worked if it didn't then you would get an error so now that I have axios I can use it to make a get request to download something and I'm going to make a request to the unsplash image API endpoint so that's pics and Dot photos and then you specify the dimensions of the image that you want to download so next I'm going to handle the result of the request so axios is promise based meaning you can access its result using the then method and then the result is available as a parameter inside the function you pass into then so I'll use Arrow syntax here and if there's an error then the function that you place inside the catch method fires so again with area syntax and I'll just log that to the console for now now if you try this you're going to get a very odd result because axios assumes when it gets something that it's going to be in Json format so it's going to try converting this image from Json to a JavaScript object and we're going to end up with something that looks like this so the result is on the data property in the object that axios has returned but it's no good to us in this format so what we need to do instead is to specify some options in an object in the second argument position inside the get method so you can do it like this or what I'm going to do instead because it separates out the object from the call itself making it a little bit less messy is to specify an options object and then before I forget in the second argument position pass in the options object so what you want to specify here is the response type you want to set that as blob so blob is just a file container so what we're going to get is this image back in blog format and from there we can create a temporary URL out of it and set that as the SRC of an image so before continuing I notice that there is a typo in response type there should be an e there so it's very important that you spell these properties correctly also with the correct camera paste because otherwise axios will not recognize them so I'm going to come back to the handling of The Blob in a moment but very importantly in the context of this tutorial we want to track the download progress of the image so for that we create an undownload progress function and we create that here inside the options object so we need to specify a new property there called on download progress and the value of this should be a function so what's going to happen here is every time there is some progress on downloading this image axios is going to fire this on download progress function and that is going to give you some information periodically about the progress of the download so the way it passes that information to you is via an automatically available event object so I'm just going to log back to the console here and we'll run this in the browser and you'll see that I get several console logs as the image is downloaded from unsplash so for now ignore this progress bar because we haven't programmed that I will return to that so you see that we've got quite a few logs to the console here if we take a look at the first one it has a loaded property on it specifying the number of bytes downloaded so far and a total property specifying the total number of bytes to be downloaded so if we take a look at the last log to the console okay this is the data itself so that's the result so the last progress log was this one so you see that it's loaded the full amount here loaded and total are the same and there's also a progress property here that specifies one here that means the download is complete at the beginning if we look at the first log you see it was almost zero so you can calculate the download progress either as loaded divided by total bytes or by using the progress property now I believe that this progress property is fairly new in axios so to be on the safe side just in case you're using an older version I'm going to calculate progress as loaded divided by total so whichever way you do it you're going to get the same result anyway so first I want to get the value of loaded on the progress event object and divide that by the value of the total property now this is going to give me a value between 0 and 1 and for a percentage to display to the user I want a value between 0 and 100 so to do that I simply multiply this result by 100 and I'm also going to round that end result so that it's a whole number using math dot floor so that's going to give me a conservative estimate of the download progress and I'm going to save a reference to this value that is the outcome as percent complete and I log that to the console and we should now see as the download progresses a percentage complete being returned to us so let's take a look at that now so you see that that already ran I'll refresh the page so you see that for each download it's returning a percentage complete periodically to me that's great because I can now use this value to display to the user and also to update the progress bar so let's take a look at the progress bar so in the markup there's a container a progress bar so this is the actual bar itself and then there's the fill for the progress bar so there's a distinction between the actual bar which can be empty and the fill that goes inside of the bar so the trick here is that the progress bar fill element will at first have a width of zero so width of zero percent relative to its parent progress bar and as the download progresses you want to update the width of progress bar fill so it expands to fill the progress bar so in order that you can see what I'm working with here in the CSS so not much of it is actually essential for the progress bar so on the wrapper the width you need so this is setting the width of the progress bar and then the progress bar element it's 100 width of its parents it's going going to be 600 pixels and then you just have some styling here and then the fill is starting at a width of zero and it's important that it has a display of block and I've also added a transition here so that when the width changes there will be an easing in and out but this is optional the important bit and the bit we're going to be manipulating here is the width of the fill to be zero percent to 100 of the width of its parent which is progress bar so this is 600 pixels wide because it is 100 of its parent which is the wrapper element so what you want to do in JavaScript is to select the progress bar fill element so that's a class so I'm going to use the query selector for that and I'll save a reference to that which is a bit shorter I'll just call that fill now inside the download progress function what you're going to want to do is to manipulate the width of that element so you can do that by saying fill dot style dot width so that is going to equal percent complete so I can just insert that there something you might also want to include is the percentage progress in text below the progress bar so here you see I have a span with a class of progress text so I'll select that also using the query selector so for this it's super straightforward just say text dot text content equals and it's the same value as before I just want to display the percentage complete as a string there okay so let's take a look at this in the browser now so it already ran but hopefully when we refresh we see the progress bar is working properly and the text percentage is also updating for testing you might also want to do this I'm going to add some throttling so that is just simulating an internet connection so for that you click on the network Tab and I'm setting mine to a slow 3G so let's test it now SO waiting for the download to start and now you see that everything seems to be working just fine the progress bar is filling so the width is being updated inside the on-download progress function and the text is also being printed correctly now there was a bit of a delay at the start but that's because I'm using this slow 3g connection if there's no throttling then you notice that it all goes at a much quicker speed okay so now where is our image so I left that until last because it's not the focus of this tutorial I wanted to mainly focus on the progress bar and text but you can get the image from a Blog and display it on the screen as follows so at the moment there's no image element in the Dom so I'm going to create a new one here in JavaScript by calling the image Constructor object now for the SRC for this image I'm going to use a special method on the URL object that's on the global window called create object URL so this accepts a blob and we'll create a temporary URL to it in the user's browser so if you pass in a blob here so don't pass in just res the payload therefore the blob object it's on res dot data there's axios then finally you want to append that image to Dom so you can see it now something else you might want to do is when the download is complete to remove this entire markup from the Dom because you no longer need any of this progress stuff so that is what I was doing in the preview so I will do it here as well so to do that I simply select wrapper and then I remove the wrapper from the Dom so I can do that by calling the remove method on it that's going to remove the wrapper element and all of its content so once the download is complete or we should see is an image so if I refresh now you see that when the download is complete we're losing all of that markup and we're seeing the image and before that our progress bar is working I'll just slow that down again so we can see the final conversion in action so I'll make it slow 3G again so if it was a larger download it would look something like this user would get an accurate reading of how far it is loaded and in this example I removed all progress bar contents from the Dom 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 it helps us with the algorithm and others to find this video and if you'd like to see more content like this from us in the future don't forget you can subscribe to the channel

Channel: OpenJavaScript

Views: 6,500

Keywords:

Id: QabJ7e7ku58

Length: 15min 7sec (907 seconds)

Published: Mon Nov 28 2022