How To Upload Files Using React Hook Form

how to handle file fields using react hook form let's create a new react application react book form file input now let's move to this directory CD react form file input and install rat form yarn add react cook form now let's open the project open SRC up to GS remove all the layout define a form inside of it define an input type file name picture also define a submit button with text submit let's remove the inputs that we are not going to need format the document and now we need to define a register we get it from use form book I have a full video about react cook form it will be somewhere on the top of the screen register equals use form now we'll pass this register as a ref to our input and now input becomes a control input handled by react form we can now handle form on submit event on submit equals handle submit and we need to get it also from the use form and do submit and we pass our event handler there con submit let's define on submit function this function will accept data object whoa beta the data object will contain their parsed field values from our form in our case we have only one field it's an input and we will have the files list that were uploaded through it so now let's just load the value console.log data let's remove that test that is not going to pass annually and let's launch the application here we have a file filled and submit button let's choose the file I'll upload some inje file and now I press submit and we get our picture as a file list and the first element there is a file with all the file attributes so we can now upload it to our API the field is called picture because in our code we have the name picture on our input element react rock form automatically uses the name attributes to create the data object fields with the same names now let's use this hook to improve one of the examples from the previous videos right now we are handling the file upload here manually so we have to subscribe to own change event so when the user picks the file for this input we immediately upload the file to the firebase storage let's fix it and first we'll have to install the rack for meeeeee library Yaron add react book form now we can import it import use form from react book form we can now initialize the register and handle submit Const register handle submit equals use for now we rot our input into a form we add a submit button submit we can format the document we need to provide the name for our input so reactive hook form can handle it name equals image now we will define our own submit equals data and inside of this function we will just do the same as we did before in unchanged but instead of the file we will get data image 0 and now we assign an on submit probe to B and to submit with our own submit function and we can also make this input field required to make this input field managed by ragtop form we need to pass the ref register to it and now we can remove the own change handler because it will be handled by use form hook and let's remove the probe unchanged format the document and now let's launch the app let's pick the file I'm going to pick the Dino logo let's submit and as you can see we have our image uploaded here thank you for watching this video the code will be in the description and join my discord server where it can propose new topics for my videos see you in the next one

Channel: Maksim Ivanov

Views: 118,377

Keywords: react-hook-form, react-hook-form file upload, react-hook-form firebase, satansdeer, react hooks, react, javascript, reactjs tutorial, react tutorial, react-hook-form tutorial, react-hook-form image upload, react-hook-form example, react js example, firebase file upload, firebase file upload web

Id: XlAs-Lid-TA

Length: 5min 16sec (316 seconds)

Published: Tue May 26 2020