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

#reactjs #antd #fileupload #codewithaamir
In this video tutorial I have explained how to upload file using ant design components in react js, get upload remaining time, use custom axios upload api, show custom upload progress bar, show custom upload file list, how to make drag and drop upload component in reactjs.

This video focuses on
- How to upload files using ant design components in react js
- How to get upload remaining time and show on react components
- How to use custom axios upload api to get progress and time remaining events
- How to show custom upload progress bar in antd Upload component in react project
- How to show custom upload file list instead of antd upload default file list
- How to make drag and drop upload component using antd upload in reactjs
- How to create a util methods to convert timeInSeconds to proper hours, minutes and seconds
- How to calculate total time to upload multiple files using ant design Upload UI Components
- How to use antd space component to adjust the UI in this react tutorial project
- How to use typography to show different content in antd & react project
- How to show upload success for file upload app features in react js
- How to use antd upload to convert into a drag and drop file upload componet
- How to use axios to make post call to upload a file and get file upload progress events
- How to extract time to upload a file using axios api integrations in react
- How to use javascipt reduce function to calculate accumulative time remaining for file uploading
- How to use customRequest prop in antd Upload component
- How to use action prop in antd upload component
- How to use showUploadList to hide the default view of upload list
- How to save current upload list inside a react state

Happy Coding!

[deogenesabejuela]

Thank you so much. You saved my day. I already wasted 1 day on this. Your tutorial is perfect for my requirements. Thank you so much and god bless you

[hakan]

I am in the office and saw your notification. watching now

[s.m.mahmudurrahman]

that is a fantastic video tutorial. Great work....❤❤❤. This video tutorial was very needed by me

[naveenchary]

Great Video Aamir.
Thank you !
A question here
What if we want to start uplaoding the files one after the other on a Start uploading button.
And while uploading what happens if the file upload has failed for some reason and how to handle this situation.
Please suggest

[OThiagoliveira]

Great content, keep it up!
But seems like the progress atritube, on the event, do not exists anymore,
tryed to replicate your example and the progress bar didn't funcion how it was supose to do

[abdelmonem]

Hey bro,
I really appreciate your valuable content and hard work.
Recently I have used your videos accompanying my tasks.
I have question realted to this video topic
How to validate file size and prevent form from submitting in case the file size exceeded 2 megabytes?

[夜猫真里亞]

hi, I have a question about Item.Meta in ant d's List: is it possible to make the text displayed in the description larger or open the text line spacing?

[DungLe-rpvu]

Hi Aamir,
I call function onUploadProgress but it just return
{
isTrusted: true
}
don't have another props
pls help me !!

[Ismoil_Sharifov]

how to open that localhost:8000 URL address to except files???

[tusharkhandejod]

Hello can u pls add one video on how to extract zip files from frontend using React and javascript?

[panumassaewong]

Next time please let me know for form upload for create and edit data.