How To Upload Files Using React Hook Form

React-hook-form supports file uploads. In this video I'll show you how to upload files using react-hook-form. And also we'll update the firebase file upload example with react-hook-form

I write about React and TypeScript there

[huntergarrett]

Finally, forms don't make me hate React. Thanks for sharing!

[JoycePGama]

nossa, muito obrigada, estava precisando desse video, não encontrava nada claro como interpretar o file para o backend e para o front-end, esse video me deu uma baita de uma luz, obrigada mesmo <3

[Bazantify]

you specified 'image', but would it work with other kind of file like text or nums?

[rockonileva]

Nice! I needed to learn how to use React Hook Form on the fly and it was perfect for it

[VBDesignsable]

It's amusing coming from an episode black sails, seeing captain flint teaching react AYE

[mikemalone]

Great video! There was one problem that I faced that no video, not even this one addressed. When sending over the file data to the smtp client, in my case I had to send the result from the fileReader.onload(event) call. The event object has the target which has the .result property. This property contains the blob (file data) that I needed to send to the back-end. Trying to send e.target.files[0] only sent the string, and not the actual blob data.

So within the fileReader.onload(event) function, you can get the result of the file data like so and then set it as the value of the form field to be sent to the back end:
event.target?.result

In react-hook-form I set the field value of the "file" field as follows:
"setValue('file', {
fileName,
blob: || '',
});"

This was the ONLY way that it worked for me.

[mishimakazuto]

thank you for nice video. I have a question.
If don't want to print the input file button, how to I fire submit event?
In short, the hidden input file's onChange event qual to submit.

[iftekhar]

Hi,
Facing an issue that is given below during set the selected file info in `setValue` that is extended from react-hook-form
setValue('file', e.target.files[0], true);

Issue: Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically

your prompt feedback would be highly appreciated :)

[Programarium_academy]

How do I work with multiple file fields? I'm interested in deleting files from the input. Thanks for video!

[DevOpsHasan]

Please share full file post to server using Axios. by default "data" generate with react-form-hook are not multipart/form-data. Please share a complete example.

[bibblebabl]

BTW, thanks for your videos. Nice style and editing

[Ernuna]

Any suggestions on how to upload multiple files for example upload 3 files, delete one of them and send rest 2 via react hook form?

[nirvanzentinal]

error : path.split not a function
ref={register} not work
replace all with {...register('value_name')}

[camilomezu]

Thank you so much i was having a lot of problems building my forms with react default hooks

[jaycodes]

hey, but i am having problem getting it in my express
as from frontend when i send it with JSON.stringify(data), it vanishes the filelist.
what i get is empty object.
as i want to store file name in my backend.

[josejustinoneto]

How can I upload a file with react-hook-form in onChange function?

[sergiyrudenko]

Thanks a lot! Great explanation!
Please make higher resolution for next tutorials at least 1080p.

[mefugoenmicarro]

now in react 7: <input {...register('video', { required: true })} />

[magrur]

Bro, thank you. Which theme is it in the VsCode?

[christianvargan]

Hi sir Maksim, how can i get the file value before resetting it in onSubmit function because i cant access file value if i try to reset it. Thank you.