Handling File Fields using React Hook Form

In this article, we will learn how to handle file uploads using 

 is a great library that provides an easy way to build forms with React. It provides a number of 

 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 

 to generate a stock React app. We'll call our app 

npx create-react-app react-hook-form-file-input

Once the app is ready, we can navigate into the folder and install 

cd react-hook-form-file-input
yarn add react-hook-form

 file. We can remove all the default markup added by 

 element which contains a file input and a submit button like so:

import React from "react";

function App() {
  return (
    <form>
      <input type="file" name="picture" />
      <button>Submit</button>
    </form>
  );
}

export default App;


 function which, as the name suggests, connects a given element with 

import React from "react";
import { useForm } from "react-hook-form";

function App() {
  const { register } = useForm();

  return (
    <form>
      <input ref={register} type="file" name="picture" />
      <button>Submit</button>
    </form>
  );
}

export default App;


Now that our file input has been registered, we can handle submissions by adding an 

import React from "react";
import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input ref={register} type="file" name="picture" />
      <button>Submit</button>
    </form>
  );
}

export default App;


 is an object whose keys are the names of the fields, and values are the values of the respective fields.

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 

, let us look at a slightly more advanced use case for uploading files to 

You can find the code for the Firebase file upload example 

git clone https://github.com/satansdeer/firebase-file-upload
yarn

You can set up your Firebase configuration in the 

 files at the root of the project, and log into Firebase using the 

 file contains a file input which uploads a file to Firebase.

import React from 'react';
import './App.css';
import {app} from './base'

function App() {
  const onChange = (e) => {
    const file = e.target.files[0];
    const storageRef = app.storage().ref()
    const fileRef = storageRef.child(file.name)
    fileRef.put(file).then(() => {
      console.log("Uploaded a file")
    })
  }

  return (
    <input type="file" onChange={onChange}/>
  );
}

export default App;


import React from "react";
import "./App.css";
import { app } from "./base";
import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    const file = data.image[0];
    const storageRef = app.storage().ref();
    const fileRef = storageRef.child(file.name);
    fileRef.put(file).then(() => {
      console.log("Uploaded a file");
    });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        ref={register}
        name="image"
        type="file" />
    </form>
  );
}

export default App;


 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

https://github.com/satansdeer/firebase-file-upload

AUTHOR

Maksim Ivanov

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

Andreea Macoveiciuc

In this article, we'll cover two ways to create React forms: the HTML way, with uncontrolled components, and the best practice, with controlled components.We'll discuss concepts such as: what are controlled and uncontrolled components, main tags used in a React form, and form validation and submission.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

The Future Of Software Engineering

Tutorials on React Form

Handling File Fields using React Hook Form

How to Create a React Form: Controlled vs. Uncontrolled Components

This has been a really good investment!

Advance your career with newline Pro.

Email Newsletter

Popular Topics

Masterclasses

Tutorials

Fullstack React with TypeScript