Upload File inside a Form using Ant Design and ReactJS | Prevent Form Submitting Without a File

hello guys welcome back in this video tutorial we will learn how we can add file upload component inside the farm and we will see how we can prevent the farm from submitting if user has not selected any of the file and also we will see how we can prevent the form from submitted if the files had exceeded our limits right and ultimately we will allow the form if the file is selected and it is within the file size limits right so see how we can achieve that let's get started I have an empty react.js project that is using and design and right now is showing nothing so let's go ahead and import the form as well as the upload component from end design and start using it so it will be a farm and inside that we can add a form dot item for the upload component and inside that we can add a upload component and show a button we can say upload profile picture right and here we can give it a label of maybe you can say a profile picture and give it a name of profile picture right and if I save it as you go it has added a form with one item profile picture and we can upload output file features using here so I can set any of the file here right so we can add a submit button here so for that we can say it's a button and the text is submit and give it a type of primary and HTML type is submit right and if I save it maybe I can make it a blob so that it's cover the whole Space right and once this button will be clicked uh it will call uh the on finish uh if the all of the uh required fields are filled right so we can say on finish will give us the values and here we can just console it right so we can say the values right save it and if I go to the inspect and go to the console and if I submit here you go it is giving us the values profile picture and it gives whatever is inside that right so there is a file and also the file list right okay so if I you know refresh and just uh start the submit it's still going uh to The Unfinished and giving us the values right so how we want to prevent the form to from submitting uh before I upload any picture so for that we can add some rules on the form dot item so I have a separate video on how to add different type of validations or rules on the form atoms I will add that video link in the I Button as well as in the description box so that you can take a look so it will be an array of rules so here we can say the required is true and if the user has not settled any file we can say please upload your profile picture right and if I save it and just refresh now and if I submit no it says that please upload your upload your profile picture right and if I upload it and now if I submit then it goes to the unfinished and shows us the values right so this is how we can prevent the form from submitting uh before I set any up file for uploading right so there are other options or you can say the use cases as well where we want to check the uh file maybe we want to check the file size if it is certain file size then we want to allow otherwise we are we will reject the file and we will reject the form from submitting right so for that we can add the before upload right I have a separate video on covering the upload component in details uh where I covered how to prevent certain type of files like only pngs or load only you can say certain file sizes are allowed and things like that I will add its link as well in the description below so that you can take a look so here it will be giving us the file and and here we can return the promise we can see the Promise and it will give us the result as well as the reject and here we can check if the file dot size is maybe greater than 2mb we are just making Behavior here so you you might be checking it is 20 MBR 2mp something so we are just saying that if it is greater than 2 then we will be rejecting it and giving us the reason that we can say the file size exceeded right otherwise we can just resolve it and we can say it's a success right so if I save it now and select any of these files so it's now rejecting it it's not trying to upload it right so here we can even see some error messages so we can say message again from the end design we can say the error and give the same text here as well so copy it and paste it here so now if I refresh and just select any of these files so it says that file size exceeded right so we are providing the error here right and still if I submit it gives the values right uh because we have not added any rule for this validation it is just the file upload component that is rejecting that file so we can add the rule here as well so we can this time we can add a validator the custom validator it will be providing us the rules as well as the the value and in our case the value is the file list right so it will be giving us uh the all of the files we have and here we can again return the you can say the same promise and here we can see the file list of maybe uh we can check uh the single file at time or we can just Loop over up on all of these files and we can check their sizes and if the files file size of all of these are within the limit we can ultimately either resolve it or reject it right so for the Simplicity I'm just allowing we can see the single atom so we can say the max count is one so only one atom will be allowed to upload and we will check in the first item here right so here we can reject it we can just get rid of this error message here and we can say files are exceeded reject and otherwise it is a success right so if I save it and just refresh and if I upload any of the item so it says files have exceeded but here it is giving us the error that cannot read properties of undefined reading the size that is because it the validator does not know uh what is the value because in our case the value is the file list so we have to tell the found item so what is the Pro for the value so we can say that value prop name is the file list and also uh we need to tell that how to extract the value so we can say that get value from the event and we can say it is the event and we can return the even dot the file list right we can just make that optional so that if somehow the file is not is empty so we can return that undefined right okay so if I refresh and select any of this files so it says file succeeded and giving us the error here as well right so here what we did is we are actually giving the found item providing the props name is that can considered as a value right so because uh the upload component the value is the file list and it won't change it it also gives us the file list right so it is a similar concept which we covered in other videos as well like uh while we are showing the switch and the value or the the value prop is the checked instead of the value so we provide them here in case of switch that the value problem is checked right so here in case of the upload we are saying that the value proper name is the file list right Okay so if I just refresh and we can just do the summit right away so it's again giving us the error that we cannot read the file list so here we can add another condition like if the file is exist and then we can check the file size and then if the refresh go to the summit so it says that it's first we need to upload the file so this rule is executing right and if I select any of these files and then it says that file side is exceeding and also giving us the error right so if we Mentor this one uh this will it will not show uh the error in the message it will just show there here right and if I change this value to maybe we can say 20 000 and also we can say 20 000 hopefully the file size will be less than that so if I save it still it is greater than that let's make it a little larger save it just refresh and select the file still we are not in the limits so maybe we can make it it's 90. and also here we can make it okay let's see what it does now if I change the file to this one so now we are in the reverse and it tries to upload the file right and if any no submit it it will give us the values right so right now as soon as I select the file it try to submit it if we want to prevent that uh we can say a custom request is equal to uh the information it is giving us right so here we can only uh so instead of submitting it will be calling us this function so we can upload our file here if needed I have a separate video on how to upload the files inside the custom request I will add its Link in the description below as well so that you can take a look and other ways we can add uh the action and we can provide the the URL here so on which we want to upload right so this way this is uh if we production so this will upload the file right away also if we provide the custom request it will also upload the file right away right and if we want that the file should not be uploaded it will be kept here and if I submit it will give us the value here and then we will be uploading later on based on our other values as well like instead of this found atom we have other form dot items as well like we have some we can say the first name last name and email and then the preface picture as well as well so we will be getting all of those values uh inside the file inside this unfinished like so we can see if that we have the other items as well we can say it's an input so it is uh maybe we can say full name right and name is equal to full name right so if I save it and here you go so it has added the full name as well right and now if I submit so it gives what is the full name and uh then the profile picture right so if I add anything here and then submit it will give us the full name as well as the profile picture so we can ultimately get in the values here and we can upload or we can make an AP calls accordingly then we can push the full name as well as the profile picture to our server right so this is how we can add multiple form dot atoms inside the form that include the upload picture as well right and we can add a role to prevent the form from submitting if it if user has not uploaded any file and we can add a custom validator as well based on the file size and here we can Loop over all of our files that we can add any of our logic we can say only the PNG file is allowed or we can say only this file name is allowed and things like that right so it's up to us whatever we do here so after our logic we are we will be either resolving the promise or we will be rejecting it right and now if I upload any of these files so it will show like this way right so if you want that we do not want to be shown here because we were we will be uploading the file eventually here so here we can say that show upload file list is false and instead we will be getting the file list here so we can add that inside our state we can say used it and it will give us the file list and bad part it will be empty and and here we can say set file is to be the info dot file right and here we can just say that the file list of 0 dot name right we can just make the conditional right and if I save it just refresh and upload any of this file so it will say that this is the file that user is about to upload right and if I submit so it will give us the values here because I have selected the file right here you go and if I refresh and without choosing a file it says the file upload is required and I can give the name here and select any of the file both of these values are there and I can submit here right all right so that's the transferring the upload component within the scope of the font so we have covered how we can add a upload component inside the farm how we can prevent the user from submitting before a user has uploaded a picture and also we have seen that how we can prevent the form from submitting if the upload the profile picture doesn't follow any certain criteria right but still if you have any question 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: 11,049

Keywords: reactjs, antd, ant design ui, react antd tutorial, codewithaamir, antd upload, upload file inside a form, Upload File inside a Form using Ant Design and ReactJS, Prevent Form Submitting Without a File, form validation rules for upload, upload only certain file size, reject large file size antd react, ant design form validation rules upload component, prevent form submit for certain files react, antd upload beforeUpload, antd from validation rules, antd form custom fields validator

Id: 2EPfEnNwtWU

Length: 16min 59sec (1019 seconds)

Published: Thu Feb 09 2023