Ant Design File Upload | Drag and Drop File Upload | Validate file before upload | React Js Tutorial

#antd #reactjs #fileupload
This video focuses on
- How to use Upload component from ant design
- How to use Upload.Dragger component for drag and drop of file to be uploaded on server
- How to select multiple files for uploading using antd Upload component
- How to customize uploading icon
- How to customize files list which are being uploaded or in progress
- How to limit certain file types to be only selectable for uploading like .png, .jpeg, .doc etc.
- How to reject file upload based on file size etc using beforeUpload prop of antd Upload component
- How to show file upload progress and customize it
- How to show already uploaded files
- How to hide delete button for already uploaded files
- How to show preview of uploaded files, in-progress files or erroneous files

Happy Coding!

[damouwalid]

you saved me after 4 hours dealing with [object, object] shit in my flask backend thank you <3

[arnaudpoutieu]

Great content Aamir,
I'm following your tutos since few days now and I enjoy them pretty much.
Regarding the upload action, is it possible to perform a customized behaviour (for instance getting the bytes of the uploaded files and do a bulk push to an API endpoint)?

[Player-di]

Great tutorial bro
But how if the site is refreshed will the images uploaded be deleted?

[hanza]

hey bro, i set maxcount to 1, set upload endpoint in "action" and delete endpoint in"onRemove" but i cant find way to remove the replaced old file from backend if you drop another file instead of click remove button? how to set delete endpoint when old file being replaced?

[tosinakerele]

Thanks for putting this up here; I love the insight that you provided. However, I am trying to implement this with typescript but I am getting some sort of errors. Infact, it is the image cropper feature that I am trying to implement but my compiler is throwing 3 errors at me.
1. Binding element 'newFileList' implicitly has an 'any' type
2. parameter 'file' implicitly has an 'any' type
3. Object is possibly 'nul'

Can you help me fix this ? Thanks in anticipation.

[rysmo]

This is great tutorial, however, I am using redux with hooks, on the file upload> action="some URL here", which exact URL do we pass here? Help please.

[quannguyenchauthao]

what kind of url do we need for prop action for ant design upload ?

[pintassilgo]

i want to use this library but just to store the images in an array and use its ui. i dont want the component itself to try to upload, how i can prevent it from trying to upload?

[shruthichandran]

I want to show progress line when uploading below each of file, how to do that, and can i add this component as a child for MUI component

[vinodc]

When i use this file upload in the update page. All the text fields are resetting while choosing a file. Any idea for this issue?

[ThinhNguyen-zbrv]

Great tutorial, however, i wonder if we can customer Icon delete (trash) when uploaded, many thanks.

[testingaccount]

is there any way to replace the old file when we upload the new image. so both of the files are not sent to the server

[DamarakeswarGuddanti]

how to upload pdf? i am getting upload failed

[gouthammanigonda]

​ @CodeWithAamir I am facing the same issue. You can go through the upload document and select drag and drop Upload component. there I have copy pasted the code and uploaded pdf its not getting uploaded. I think the issue is with the action url. So is there any way to overcome this problem and after this can we convert the uploaded pdf to base64 and use this base64 to edit the pdf ?

[vietpdMKT]

Hi, i have a wonder i want logo update function like facebook avatar upload. In your video, you just uploaded a photo and I see that the image has not been display to the screen. So what should I do after successfully uploading the image? Iam stuck with a fuction upload and update like avatar upload. Thanks a lot!

[arthurdarwanto]

Hi, i want to test the upload component buat i dont have any url link for the action props.
there is another way to do that?
thanks

[thanhhuynh]

How to do if upload image field is required? I tried to set required rules it in the form, but not working. Pleaseeee

[engineersexploring]

Hi bro I have a question whenever i am trying to upload a file and not calling API for now it shows the file in red with 404 found error similar to what we can see in your video at the
end ? What is the reason behind that ?

[abhilash]

Hi, how can I setintialvalues for image/file in antd form.item while editing...

[ayobamiogunlade]

Hi, great tutorial. How do i get the image resolution. I want to check for a right resolution the user is uploading in my application. How do i do that?