react-hook-form is a great library that provides an easy way to build forms with React. It provides a number of hooks that simplify the process of defining and validating various types of form fields. In the following sections, we will learn how to define a file input, and use it to upload files to firebase.
Visual Studio Code (or another code editor of your choice).
A firebase account to upload files to.
Part 1: Simple File Field#
Step 1: Set up React App 🏗#
We will use
create-react-app to generate a stock React app. We'll call our app
Once the app is ready, we can navigate into the folder and install
Step 2: Defining our form 📋#
Let us define our form in the
app.js file. We can remove all the default markup added by
create-react-app, and add a
form element which contains a file input and a submit button like so:
Step 3: Adding
We can now connect our
form element to
react-hook-form using the
useForm returns an object containing a
register function which, as the name suggests, connects a given element with
We need to pass the
register function as a
ref into each element we want to connect.
Now that our file input has been registered, we can handle submissions by adding an
onSubmit handler to the form. The
useForm hook also returns a
handleSubmit function with which we will wrap our
data parameter that is passed to
onSubmit is an object whose keys are the names of the fields, and values are the values of the respective fields.
In our case,
data will have just one key -
picture, whose value will be a
Step 4: Try it out! 🚀#
When we fire up the app using
yarn start, we will see this on screen.
On choosing a file and clicking 'Submit', details about the uploaded file will be logged to the console.
Now that we have learnt how to work with file inputs using
react-hook-form, let us look at a slightly more advanced use case for uploading files to Firebase.
Part 2: Uploading files to Firebase#
Step 1: Clone the code 👩💻#
You can find the code for the Firebase file upload example here. Clone the repo and run
yarn to install the dependencies.
You can set up your Firebase configuration in the
firebase.json files at the root of the project, and log into Firebase using the CLI.
Step 2: Add
As we've seen earlier, we can install
App.js file contains a file input which uploads a file to Firebase.
We can now switch it over to use
react-hook-form like so:
We have wrapped the
input element with a
form, given it a
name and registered it with
We have also moved all the logic in the
onChange event handler into our
onSubmit handler which receives the data from
Step 3: Try it out! 🚀#
We can run the app using the
yarn start command and it will look the same as earlier.
Choosing a file and clicking 'Submit' will upload it to Firebase.
We have now learnt how to work with file inputs using
The code used in this article is available at https://github.com/satansdeer/react-hook-form-file-input and https://github.com/satansdeer/firebase-file-upload.