File Upload using Ant Design and ReactJS | Get Upload Remaining Time and Show in Custom Progress Bar

hello guys welcome back in this video tutorial we will learn how we can use the end design upload component to handle the uploads in a custom way like we can add multiple files to be uploaded and we can show them inside our own custom components and we can show how much time is remaining to upload a file and also we can show our own custom progress bar and once the file is uploaded we can show messages and on the top we can show how much the total time remaining to upload all of these files right to see how we can achieve this let's get started I have an empty react.js project that is using and design and right now it's showing nothing so let's go ahead and import the upload component from and design and start using it so it will be upload and inside that we can add a button uh that is saying click to upload if I save it and here you go click to upload button as we added and if I click on that it shows the list of the file that I can choose and I can click to upload right away showing errors because I have not added the action or the URL on which it should be uploading so that's why it's giving an error so we will be implementing that as soon so right now I can only click one at a time so if we want multiple files to be uploadable for that we can add a prop called multiple and if I save it and now if I click on that and now I can click on multiple files as well right and if I open it it has added all of those files right and to upload the files we need to provide here the the action and inside that it will be our URL so I have a localhost running on the port 8000 uh so I can give that here we can say localhost and on Port 8000 and there is API called file upload and if I save it and refresh this one and if I you know click to upload it will upload that right so there's no error right now and I can upload multiple files as well right as you go and one way is this you can add this way the other way is instead of adding this one we can add a URL inside a XCS AP call and there we can add you can see the headers or even we can Implement our interceptors have each and everything there right so for that we can do is inside the custom request we can say handle file upload and let's copy this one and here we can see handle file upload and it will give us the file which user has chosen so if user I chose the multiple files so this function will be called multiple times and each time we will be getting the file which user has chosen right and here we can do our upload using access Etc so for that uh we can install the axis you can see npm install XCS right and we can once it's installed we can import that we can say import access from the axis right and here we can see the axis dot post output whatever your API is putting so my API is putting the post so we can say post and here we will be providing the URL it will be again the same HTTP the localhost and on the port 8000 and then there is a path file upload right and then here we will providing the file right and then we can provide uh some configurations like here we can track the progress so we can say on upload progress right and it will be giving us the progress event or we can say only uh the event right and here we can only maybe console it we can say console.log and the event right and if I save it now and just refresh click on it and upload any of these files so if I go to the inspect and go to the console so it has a shown this event so it says this much of files were there and it has loaded all of these buyers right and problems one that means hundred percent uploaded right and because now we are handling the upload by ourselves that's why it does not know how much it it has been uploaded so for that we can say that do not show this one uh yourself so we can say the show uploaded list is false and we will be showing showing of the files ourselves using a state uh every time user chooses uh file this function will be called handle file upload and we will getting each file and and here we can save each of file inside our state variable and here after the upload we can map over those files and show the list here right so let's get a State variable we can say use State we can say files and by default it will be in empty object so we will be adding the files based on you can say uh key value pair so file ID again there will be file right so that's why I have added this as like an object right and here we can say set files is equal to whatever is previously so we can say return dot dot pre and then we can say file dot uid so each file will contain a uid a unique ID and then insert that we we will be adding our file so this file will be looking like it will be an object and it will be container key value pair so key will be the file ID and the object will be the whole file and so on so forth right and here we can map over that so maybe we can add this inside uh space and we can see instruction is vertical so that we can show the upload and then the list right and it is placed right and here we can Loop over these files we can say files.map and it will give us the file as well as the index right and here we can say there's one pregnancy okay here we can say return uh again we can say inside our space return now maybe uh one typography and here we can return the name of the file so let me show you what we get from this file so we can console.log and the file if I save it refresh there is some error so let's see what is the error if I go to the console file map is okay actually the file is an object and here we are only mapping over there so instead of that we can do is object Dot values of each key and it will give us the file right and if I save it now there you go and now if I click on any of these file and go to the console and it gives us the file and it contains the uid and then the name of the file right then the size then type as well okay so here inside the typography we can see the file.name show that here right and maybe we can add a icon here as well we can say file outlined right and if I save it here you go it has added the file name and if I choose multiple files there you go maybe we can do this too though right here you go it is another file the file icon then the file names all of the files we have uploaded right and maybe uh we can add some Styles over these so here we can say give it a style we can say the background color is maybe RGB a0 comma zero comma zero comma zero comma 0.8 maybe zero five right and if I save it here you go and maybe uh we can add a style here and we can say style its width is 100 feet w it's width right and for this one we can give it a width of maybe we can say 500 here you go and we can give a padding of maybe eight pixels here you go and also we can add uh you can see the percentage it has been uploaded right so we can say inside uh this space we are showing uh the file name and this the the icon and then again after this one we can add another maybe space and it's ending and the objection of this will be vertical right and here we can add a progress uh right and for the we will be given a percentage suppose we give it's a percentage of 50 so it will show 50 percent right and we can give it some style to this upper space as well so we can remove this one right okay and instead of instead of giving this the 50 hard coded we can update the progress from here right so we have the progress inside this event so it is under the we can say progress so for that we can let's get a small function we can say const uh get file object and we can give this in the progress right and what it will be doing is it will be returning the maybe the file name it will be equal to the file dot name and then maybe the uid file Dot uid and then the you can see the progress will be equal to the progress passed right sorry progress right and here we can say uh set files to be equal to whatever we have here so we can copy this one and here we can say set files to whatever it is previously and then instead of this file we can say get file object and we will be passing this uh progress right it will be even.progress right so we are passing the internet progress to this object to this function and it will be turning as an object that you can say the name of the file the uid of the file then the progress of the file right so uh here we are instead of adding you can say the whole file we are only showing the uh these three are three parameters right so we can uh remove this one and we can let's keep this one this log yeah and at the end we can say instead of this percent we can say the file dot progress right if I save it and just refresh click of any of the file and sorry uh because the progress is you can say from 0 to 1 right and we need to multiply it by 100 as well to get the percentage so if I save it here you go it has added full and instead of this uploading to be immediately uh let's mimic the behavior by Network throttling and we can say it is a fast 3G right and now if I click on any of the file and it will show how much the percentage is right now right so it's showing the percentage upload and maybe we can you can see instead of this one we can uh seal it right so we will be sealing it here we can say math dot seal and give it here okay now if I refresh and click upload there you go no it is a whole number right and I can even upload multiple files right so it's showing uh the progress right so here we can even show how much time is remaining to upload that file right so if we go to the console so we are getting here the bytes loaded and then also the estimated time remaining right so here uh when we are getting the object we can pass the immortal progress as well as we can pass the event dot estimated right and here we can say it will be the estimated and then we can say the estimated is the estimator right so in the object we have the estimated as well so here while we are showing the name we can show and we can shows another typography typography dot text and is type is secondary and we can say this file name and then our space you can say is being uploaded in then uh space and then we can say the file dot estimated if I click with upload there you go it's being uploaded in this much of uh seconds and here again we can say math dot maybe we can say it's again a scene and here you go 15 14 13 seconds right and even we can say the second as well here and if I click on the multiple files and start uploading so each file is saying it's uploaded in some time right so 108 103 so instead of this showing 98 seconds we can convert that in uh into you can say one minute and 30 seconds something like that so we can write a small function here uh that will calculate the time uh string we can say closed uh get time string and we will be passing the time in seconds to it and here we can get the hours is equal to sorry it will be closed or is equal to time in seconds and divided by 3600 so from the seconds to convert into Earth we need to divide it to 36 3600 that's equal to 60 plus 60 right and it will give us the hours and then we can see const minus is equal to time in seconds divided by 60 and we will subtract the minutes we have encoded inside the hours so we can say hours cross 60 right so what we are doing here is uh we are calculating the minutes of all of this and subtracting the minutes we have converted them into the hours right so here we are writing our own function but if you are using some third party Library like the moment.js or the digits so you can use that level to convert your data into that format right and then similarly we can say const ant is equal to the time in seconds minus the minutes across 60 minus the odds Clause 3600 so we have removed the number of seconds we have created minutes out of it and we have uh subtracted the seconds we have created the Earth from out of it right so this will be the number of seconds minutes and hours and here we can say the cost time string sorry is equal to we can say the seconds right okay so you can show this much of seconds and if uh the minutes like this then we can see instead of this cost we can say it's uh let we can change it here we can say time string is equal to we can say taller and minutes and you can say Min and then the space then the time string we already have right so it will be showing this much of minutes and this much of seconds right and then we can say if there's any Odd as well then the time string will be the ores and here we can say HRS RS and then the whatever the time string is including the minutes and the seconds right and we can just return the uh the time string right and we are showing it here uh we can say here that uh get time string and give it the file dot estimated right and now if I save it and just refresh and see what it shows to us so it's showing too many Minnesota Arts so here we can say math dot maybe we can give a floor and convert these and again here we can say math dot floor and and then in the second as well math dot floor okay now if I save it and click another file so here you go 29 seconds and if I give a zip file 38 minute and 50 seconds some 17 minutes right so uh in the very start you see it was showing any n so that is because if that estimated is not yet calculated so we can say it's a maybe zero right so now if I refresh and click on any of these files maybe all of these so it's saying 38 minutes 17 seconds so it is already uploaded right and here you have uh the time remaining for each of these files so we can show a cumulative time on the top as well whatever the time beginning for uploading of all of these files right so we can calculate that time as well so we can say cost you can see it total remaining time is equal to we can say the object dot values of files and then reduce that and it will give us the the previous value or we can say the total comma the current value and it will be a function right and then the initial value we can start from the zero right and here we can return the total plus whatever is the current dot estimated right so it will give us the total uh meaning time so we can show that maybe here we can say the typography Dot sorry Dot title you can total remaining time is you can say total meaning time and if I save it your total menu time is this one uh we can uh format this time as well so we can say get time staying out of it right here okay so it says total remaining time is 6 minutes and 3 seconds right so it's six only one file so if I refresh and add one to two files so total time is meaning is zero seconds so if it is this one so three seconds and if I add another file it is 50 seconds another file so it's saying third around 40 seconds this one and one minute this one so one minute 40 seconds right so now it's accumulating uh all of this time right so if I add uh more files and click to upload so it's cumulating all of this time right and for this click crop load we can convert that to a drag and drop as well so for that what we need to do is we can say upload Dot inside the click to upload we can say tag files here are click to upload right there you go it says so now I can drag the files over this area or even I click the button here even we can click outside here as well right so it will start uploading the files right and we can add some styling uh to this one so that everything is maybe you can say in the center right so for that uh what we can do is inside the tracker we can see the style and it's which is maybe we can say 500 right and here we can say it's displays flags and we can say justify content Center and align items to be centered and maybe maybe we can add some uh top margin as well so we can say margin top is maybe 24 pixels if I save it there you go right so everything is centered if you make it full screen it's centered right so looks good now so if I add some files so a number of seconds the image only three seconds remaining two one and turn and regarding the rest of the props like uh when whether we want to reject some of the files before uploading we can say if it if it's only a PDF then it should be uploaded or if it's of this much of size then it should be uploaded and things like that I have a separate video on that uh I will add its Link in the I Button as well as in description below so that you can take a look so it covers all of those scenarios for rejecting of these files or we can say the customizing and manipulating other props of the ad is an upload component right and also here once it's been uploaded uh if you want that I should not say is being uploaded in zero seconds we can say upload successfully so for that what we can do is we can say if the file dot estimated is exist so here we can see if there is something in the estimated uh then show this typography right and otherwise uh show something else we can see we can see is uploaded successfully right and we can remove all of these right and now if I save it is uploaded successfully right so if I refresh and add some files and here you go so it's saying it's being uploaded uploaded right and just uploaded successfully and this will being uploaded in seven seconds and let's see what he does okay it's the insane it's uploaded successfully right so now it's looks good right all right so before summarizing all of this content if you have not subscribed to my Channel please go ahead and subscribe to my channel hit like to this video and let me know in the comments what you have learned okay so as a summary what we did is at the very top we have added a space giving it uh some style so that everything is centered and then we have added the upload component and use its uh the dragger and we have allowed multiple files to upload it and for the uploading of each file uh we have added the custom request right and we are not showing uh the uploader file list by the driver component instead we are showing them inside our own Loop right and then we have added a simple style uh giving it it's a width right and inside after that we are showing uh the total time remaining right and then we are looping over all of the files and for each file we have you know the top level we have the space which is vertical so it's showing the we can say some one icon then the name of the file then the the time remaining or its uh successfully uploaded right and then at the last we are showing uh the progress right so let's go inside the handle upload inside that what we are doing is we are making an access dot post request giving us the URL then the sector paramet is the file then the third parameter is uh configurations where we are getting the progress and we can remove this block and inside the event what on each event or on each progress what we are doing is we are updating that particular file and giving us the operator progress and the updated estimated time right so for that we have later written our small function here that gives us the name of the file the uid then the progress and the estimated time remaining right and for calculator in the uh the time string what we are doing is we are giving us the time in the seconds and converting them to hours minutes and the seconds and then if the winner suggests then we append the minutes and if the order of this then we open the orders as well right and then here we are calculating the total remaining time then for that we are looping over all of you can say the files and then reducing them that will be equal to the total time remaining by adding them all of the uh time that will be taken by all of these files right so this is how we can use the upload component to handle the upload in a custom way also we can show our files in the custom way and we can add our time remaining and the root Prime remaining Etc but still if you have any questions please let me know in the comments below and if you have learned something in this video please hit like subscribe to my channel see you in the next video thank you

Channel: CodeWithAamir

Views: 12,049

Keywords: reactjs, antd, ant design react tutorial, antd file upload, codewithaamir, File Upload using Ant Design and ReactJS, Get Upload Remaining Time and Show in Custom Progress Bar, custom upload file list, drag and drop upload react ant design, total remaining time to upload files, custom axios upload api, ant design file upload, react file upload, custom file upload preview list, ant design system ui, how to use javascript reduce, antd file upload progress, react js file upload percent

Id: MxB_3Xfj8Cg

Length: 32min 57sec (1977 seconds)

Published: Wed Feb 01 2023