Handling File Fields using React Hook Form

In this article, we will learn how to handle file uploads using react-hook-form.

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.


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 react-hook-form-file-input.

Once the app is ready, we can navigate into the folder and install react-hook-form.

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 react-hook-form 🪝#

We can now connect our form element to react-hook-form using the useForm hook. useForm returns an object containing a register function which, as the name suggests, connects a given element with react-hook-form.

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 onSubmit handler.

The 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 FileList.

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 .firebaserc and firebase.json files at the root of the project, and log into Firebase using the CLI.

Step 2: Add react-hook-form#

As we've seen earlier, we can install react-hook-form via yarn using:

The 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 react-hook-form.

We have also moved all the logic in the onChange event handler into our onSubmit handler which receives the data from react-hook-form.

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 react-hook-form. ✅

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.