File Upload using Ant Design and ReactJS | Get Upload Remaining Time and Show in Custom Progress Bar
HTML-код
- Опубликовано: 31 янв 2023
- #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
For more details on how to validate file before upload like rejecting certain file size, or reject certain file types and other props understanding I have already a video on that at • Ant Design File Upload... please go through that to get familiarity with Antd Upload component.
If you are new to ant-design, I have already added an intro video on ant-design and overview of its components at • Ant Design UI library ... link, please go through that video to set up the ground for further components implementation.
For more details on ant-design, please visit its documentation at ant.design/components/upload/
Happy Coding!
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
Great to hear!
that is a fantastic video tutorial. Great work....❤❤❤. This video tutorial was very needed by me
Glad it was helpful!
So nice of you!... ❤.
I am in the office and saw your notification. watching now
Thank you @hakan ahmet,
I hope you will love this video tutorial as well.
Please let me know with you feedback on that.
So nice of you!... ❤.
Thanks for the video, curious, how did you set up the backend for taking the file upload? Django? Do you also video for explaining that?
Good!
Thank you! Cheers!
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?
Yes, you can always override the styling by making font adjustments as explained in following video
ruclips.net/video/gpG967lkiJc/видео.html
Please let me know if that works for you.
Thank you :) :) :)
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?
Thank you. @Abd el monem Mohamed
I have two separate videos that accomulative can answer your questions, I don't have a specific video to accomplish this, may be in future I will create a one.
So for checking file size and rejecting the the file upload which exceeds 2 megabytes you can get help from this ruclips.net/video/WwYcXR99j_4/видео.html video I have covered this topic there.
And secondly to have form prevented from submitting you can add a custom validator as explained in this ruclips.net/video/ajp8hmAKEhM/видео.html video and reject the promise in case the file-size as per above video was greater than 2 megabytes, feel free to save in local state etc.
so it will be something like below
IS_SIZE_WITHING_LIMITS
? Promise.resolve()
: Promise.reject("Size exceeds the limit."),
},
]}
>
I hope it will help you, please let me know if you need any more help on that.
Thanks
All the best bro👍
@@CodeWithAamir Thanks Aamir the custom validator works perfectly for my use case
I'm really appreciate your support and from today consider me one of your fans❤
Greetings from Egypt
Wow, it’s great to hear the solution worked👍.
And thank you so much for all of this love 💕. Stay blessed always 🙏❤️
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
Thank you @Naveen Chary,
If you want to start uploading one after. the other in a sequence or even want to change the sequence based on any priority etc. then you just need to manipulate the files state accordingly, just update/shuffle etc. the files state so you know which file to process next.
And to upload the files you just need to have a axios.post call as shown in the video. For the failed files you can get that in catch of axios like
axios.post(......).catch(error=>{
//Here you can show the error or even retry it with the same file data
})
and you can retry automatically with the same file data or you can show the user an error message or something.
Because we are using our custom axios upload method so we can handle it as per our needs.
I hope you got the idea here please let me know if you need any more help on that. Thanks .
Thanks for the Quick response Aamir.
I have no idea on how to retry automatically.
And here the files are uploading once we choose the file from local.
How we can achieve the uploading to the server when user clicks a external.button and then start sending data to API.
Please help.
Hi Naveen Chary , to start uploading the video on button click, in the implement of that button click you will call the functions like axios.post() instead of doing right away.
And for retry you just need to re-call the same function on failure like if the function is
const uploadFile=(file)=>{
//Try uploading
//in case of fail call it again
uploadFile(file)
}
I hope you got the idea of retry, please let me know if you still need any more help on that.
Thank you Naveen Chary
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
how to send base64 data form API ??
Hi Aamir,
I call function onUploadProgress but it just return
{
isTrusted: true
}
don't have another props
pls help me !!
I am sorry did not get your problem exactly can you please elaborate a little more thanks
@@CodeWithAamir the progress event doesnt return "progress" or "estimated". Where did you get those values from?
Hi IntercomFPV
I got these values from axios, can you please confirm you are using the latest version of axios and if still you are not getting these values please let me know we can look into it together via zoom etc. thanks
@@CodeWithAamir Yes I was using an old version. Thanks! Great tutorial btw!
how to open that localhost:8000 URL address to except files???
Hi @Sharifov.
Just to open the localhost:8000 for accepting the file you can create a sample node/express project and creating just few sample/boilerplate APIs may suffice the simple requirements but to create a full file management system will required the whole backend/Dbs etc.
very minimal code can look something like
const express = require("express");
const app = express();
const port = 8000;
const cors = require("cors");
app.use(
cors({
origin: "localhost:3000",
})
);
app.get("/", (req, res) => {
res.send("Hello World!");
});
app.post("/fileUpload", (req, res) => {
res.sendStatus(200);
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});
@@CodeWithAamir thank you bro!
@@CodeWithAamir And what i have to change when my file will be charged on a hosting space?
Next time please let me know for form upload for create and edit data.
Hi @Panumas Saewong ,
Thank you for the suggestion, I will try me best to come up with that tutorial as well in my future videos.
Thanks
Hi @Panumas Saewong,
Today I published a video which covers file upload within a form component and shows how to prevent form submit without a file or without certain file size etc.
ruclips.net/video/2EPfEnNwtWU/видео.html
I hope that video will be helpful in your use case as well . Please let me know with your feedback on that., Thank you
Hello can u pls add one video on how to extract zip files from frontend using React and javascript?
Hi @Tushar Khandejod
I have a video on download different type of files like png, zip etc. using react/javascript at below link,
ruclips.net/video/IPEqb_AJbAQ/видео.html
please go through that and let me know if you were looking something like that or need any more information on that. Thanks
@@CodeWithAamir yes i have seen that video but I need a logic where user can upload a zip file and we need to extract the zip file content and upload the extracted content to the backend api in the frontend. So can you please upload one video on that logic as well🙏
Hi @Tushar Khandejod,
I will try me best to come up with that use case video as well if possible. It may be your specific case where you need it on frontend but my recommendation is frontend should not be doing the heavy lifting of extracting the files it may be larger in size and it can slow down the frontend processing. I recommend to upload the zip file to backend and backend should do the heavy extraction etc. work.
Thanks