File Upload with progress bar in React JS and axios

hello guys welcome to the channel in this video I'm going to show how to add a progress bar to the file uploads with percentage shop using Axios so here I have a file upload or field where I choose the profile picture now I will show the prod percentage show over there so for this demo I have a sample application and you can find the link for this application in the description so let's first stop add an on change even for the file input and we first set up for this data that we are going to upload that means so we'll prepare the file since it's a multi-part or data we'll use form data so the final function will accept the event which has the files so this is a multi-platform data I'm using a form data from JavaScript so we'll just open this file to the form data and we'll send this the form data in the Axios or post request so I'm going to import Axios from axis library and I'm going to use a more KP for reporting purpose so there was a lexical mockito typo which except so the parameters that you sent and now it will return some sample response so let's check all for this working the basic final part so let me open the network and [Music] I am going to throttle the speed of the request so that we can see the progress bar oh it is slowly so the request is applauding and getting the response from there it returns us some sample urine so this is the file object that we sent and this is the response that we get from the server so here though I'm going to introduce a new state variable or percentage to actually track the percentage of uploaded file so by default it will be zero and we can pass few options to the Axios one among the optional so to have a callback event for upload progress so on appletalk progress is the callback that will be triggered of when the produce in progress it will give us a progress event which will contain the current uploaded percentage not the percentage of but actually in the data let's say if you it will contain the total data and the current data that has been uploaded to the server the amount of data that was uploaded to the soul so you have loaded and total so total is the total or size of the uploading content and the loader does so at this point of time what has been uploaded they say if you are uploading a hundred or KB it will by default let's say it will trigger multiple times and on each stage it will return its own percentage at time so to find the percentage I'm using the formula for calculating the percentage from the total it's a simple math I'm going to log this percentage and the loaded and the total percentage so this is done so it will log this thing the loaded and the total and the presentation and then we pass this option here to the post axeus and let's take a reddish working the focus I'm going to choose some sample file and upload we should probably see the response I applaud the progress callback is being triggered multiple times during the upload progress path process so you can see I think it's in it's not in KB I think it's in bytes so it is just for logging purpose I think you can ignore this so it will show the percentage and the number of bytes uploaded and all the total number of bytes so logically we need to update our state on this callback with the current percentage of the progress so here I am going to add one condition because the upload process contains upload and down upstream and downstream thing so the hundred percent will reach how if all the content has been uploaded to the server but the server will take some time to process that a question gives the response change this to upload percent so for that I will stop the progress bar at 99% and then vice change this 200% one living I get that chilled response from the server once or they process the image and they give the response back so it's up to you you can set it to 95 percent or you can set it to hundred percent or like however you want it depends on your use case and user experience so here once the response comes from the Axios I'm going to set it and on timeout I'm going to hide this again set it back to zero so that after one second I will hide the progress book also I will set the state with the response or the URL that was given in the response of the active the AAP it is just a mock-up of the picture that will return every time when I upload the same so here comes the proper spot for this I am going to use or react bootstrap library and it has a progress bar in it so I'm going to copy that progress bar I use it in the application let's create the first popular percentage from the state and Tabitha and use it there so here this progress bar will be shown when upload possibilities greater than 0 that means by default this progress bar will not be displayed and once we start uploading and the progress bar changes from 0 to 1 or something above 0 the progress bar will appear and it will show the percentage it's uploading and setting active parameter to give some animation loading animation effect to this this is a part of a bootstrap also in the label I am showing the applied percentage this is water will be shown or to the were shown in the UI so let's stick of actually working oh I forgot to input a progress bar from bootstrap so let's our first important since I have throttled the request I told sick girl some time to refresh the page that's why you are saying it was taking a little extra time to load I'm uploading your image now you see here the loading of the progress bar is displaying with the actual presentation that we calculated from the callback so hopefully once it will stop at 99% and once it reaches hundred percent it will hide after one second ok this is the actual output that we need I'll show you with anther image this is a very small image so it will take faster see it was working so this is very simple so it is up to you to design your loading animation component thanks for watching the video please subscribe for more videos like this you

Channel: Programming With Prem

Views: 76,074

Keywords: file upload in reactjs, react progress bar, axios, file upload, react with axios, file upload react js, making a project with axios and react, animated progress bar button react native, file uploads, file upload using axios nodejs, progress bar button breakdown react native, image upload react js, reactjs, javascript, react file upload, upload percentage in reactjs, show upload percentage in file upload react, react dropzone, drag and drop react, react js

Id: Ti8QNiRRzOA

Length: 11min 52sec (712 seconds)

Published: Mon Mar 02 2020