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

hello guys welcome back in this video we will explore the file upload component from ion design we will see how we can convert it into the drag and drop and how we can select single or the multiple files also we will see how we can customize the progress bar or the loading and how we can show the uploaded files are the erroneous files so let's get started i have an empty react.js project that is using and design and right now it is showing only a div which is using a style of flex the display flex and setting everything uh over the page all right so let's go ahead and import the upload component from and design and use it so inside the upload whatever we want to show to the user we can return a react component here so suppose we want to show the upload text in that case we can say chosen a p tag the upload and here you go it is showing the upload and if i click on it it will act like an uh upload file right and let's change it to a button so that when i hover on it it shows the most that it is in action so we can choose a button from the end design right okay button and then i can select it here i am showing a few thumbnails from some of my videos okay so it this is how it looks like right now we're trying to upload it but we have not added any action on which action url on which we want to upload so we will say the action to be any of the urls so suppose http and localhost port 3000 although it will not upload on this page on this url but let's mimic uh how uh you will be adding an url on which you want to upload it so in reality you will be setting here the actual url on which you want this file to be uploaded right okay so save it if i refresh so nothing changed right and here we are only showing the upload even we can show maybe the drag the files here are uh click on the button to upload so in that case maybe you can say here the drag files here are click upload right and maybe we can just add a br here the idea here is that we you can return anything any direct component from here that you want to be shown to the user for uploading right and for drag and drop files you can [Music] use a dragon component from the upload so here you go drag files here click upload right so now even i click on it and it will select or even i can drag my files so if i select suppose few files and drag on it it will show type files but right now it don't it only accept one file so i dragged multiple files but it only accept one file so to accept multiple files you we have to add multiple is equal to two or only the multiple prop so now it will now you can even select it from here multiple files and it will show here right and on the bottom it is showing uh like in a list and we can change this to other types so let's type yeah this type right now it is showing the text and we can show you maybe the picture this is how it shows so the the thumbnails we are uh trying to upload it is showing as a preview and we can even delete those right suppose for some reason we want to hide this delete icon so that suppose some user can delete it and some uh should not be allowed to delete the files so in that case we can override the show upload list and we can say show remove icon to false right so it will hide the ah remove icons no user cannot delete it and we can make it through suppose for the user who has uploaded and that can ah delete as well so we can this two or four based on some of our conditions right so let's show it so suppose if you want to add any checks like only maybe the jpeg files can be uploaded or the png can be uploaded up maybe the docs can be uploaded so in that case we can say they accept only the types which has maybe dot png extension so if i click uh save this click on it so you see all of the jpeg so nothing can be selected right so now if i come back and say that png as well as jpeg as well as dot dot can be accepted accepted so now if i click on it so no these are available right and if you want to further uh add few checks under that only the file which have this much of size can be uploaded right so that is you can add another use another prop before upload and here [Music] you will get a file which is which user has selected and and if from this function if you return on the files this file will not be uploaded so suppose here uh let's console it uh the file for now and in the file it will contain the size and other parameters as well so you can check if the size is within our limits and things like that then you can return to otherwise you can return false and this file will not be uploaded and even here you can show a add message to the user to i mean remove that error right so let's refresh and inspect show the console so if i select any file so here you see uh it has a usual idea signed and then name of the file and the the size and you can add your checks on this this size that if if it is in in our limits and things like that even you can add a check on this type as well which is suppose in in some scenarios you want to show the already uploaded list of files here uh suppose uh user has uploaded a few files on the server and want to upload more or even maybe you want to delete some of those and replace with the existing ones so in that case you can uh show the disney files so it has two props one is file list and one one is default file list default file list will be shown will be the list list of the files that you want to show uh when the component loads and the file is is the even the will be shown even even on the free range of the component so if in the in the default file list we want to say it is here we need to give us give that uh the same sort of props that we get when we upload a image here so it should contain uh uid maybe we can say bc and name maybe existing file.png and then maybe the url we can say https of course the the url we are giving here is not correct so uh it will not show that much okay so here you go this is your file.png and the url is not cloud so it is not populating its thumbnail right okay so also you can even uh for this file maybe we can say that what is the status of this file so we can see either if you're done in error or removed or it is uploading suppose who is gonna say it is uploading and we can even [Music] see the percent how much percent it is uploaded so maybe the 50 percent refresh so here you go the 50 and here you can even customize this this uh this loading icon and this card as well so if you want to customize this loading you can we can say the icon rendered could be we're gonna say return maybe the spin component uh from the indesign right here you go and if you want to customize this whole uh this this whole image card so that can also be done we can say render item render right yep and that will be [Music] suppose we want to say that image right so here you go so whatever you wanna show here you can show so here we will be past the old or maybe the existing whatever was whatever the component was rendered by the end design so we can say existing component and also we will pass the file so based on this file we can render whatever we wanna show here right so suppose we want it from the file uh we wanna say file dot name right here you go the system file.png right so you you can return anything uh from here so let's comment this one okay and also you can even customize this uh progress bar so that will be the progress and in that progress we can see the stroke width maybe you can see three a little larger right and you know we can say the stroke color uh we can say that if it is zero percent then maybe hash f0f and when it is 100 then maybe we're gonna say hash f f zero so things like that here you go right so as as long as it is increasing uh it will go from this pinkish to uh yellow color right also you can even more style it by providing the different styles here you can see there's trial you can say top maybe 12 so looks good yep and let's add few files so this is the existing one and then these are the files i have uploaded right so why this is not showing the red because we are returning false here and before upload and it will not try to upload these files so if i return true here it will now try to upload the files and it will show them red because there is an error but here you go this dragon component or the file upload component also accepts [Music] the disabled prop so suppose for for some of the users you want to disable it so then in that case you won't be able to upload the files and even if i try to drag and drop a few files it won't be load right all right so that's it on exploring the upload or the upload dragger component from the end design 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: 36,204

Keywords: antd, ant design ui, reactjs, Upload file ant Design, drag and drop file upload, codewithaamir, upload file using ant design in reactjs, antd file upload, Validate file before upload in antd reactjs, multiple file upload in antd reactjs, limit file types for file upload, file uplod progress, customize file upload in reactjs antd, show error on file upload, preview uploaded files, reject file upload, file upload using ant design in reactjs, Ant Design File Upload, ant design system

Id: WwYcXR99j_4

Length: 15min 7sec (907 seconds)

Published: Tue Jan 25 2022