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

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Handling File Fields using React Hook Form</h1><div data-node-type="summary" class="summary-block">In this article, we will learn how to handle file uploads using <code>react-hook-form</code>.</div><p><code><a href="https://react-hook-form.com/" rel="noopener noreferrer nofollow">react-hook-form</a></code> is a great library that provides an easy way to build forms with React. It provides a number of <a href="https://reactjs.org/docs/hooks-intro.html" rel="noopener noreferrer nofollow">hooks</a> 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 <a href="https://firebase.google.com/" rel="noopener noreferrer nofollow">firebase. </a></p><h3><a name="prerequisites" id="prerequisites">Prerequisites</a></h3><ul><li><p><a href="https://nodejs.org/en/download/" rel="noopener noreferrer nofollow">Node.js</a> and <code><a href="https://yarnpkg.com/" rel="noopener noreferrer nofollow">yarn</a></code>.</p></li><li><p><a href="https://code.visualstudio.com/" rel="noopener noreferrer nofollow">Visual Studio Code</a> (or another code editor of your choice).</p></li><li><p>Fair working knowledge of JavaScript and <a href="https://reactjs.org/" rel="noopener noreferrer nofollow">React</a>.</p></li><li><p>A firebase account to upload files to.</p></li></ul><h2><a name="part-1-simple-file-field" id="part-1-simple-file-field">Part 1: Simple File Field</a></h2><h3><a name="step-1-set-up-react-app-🏗" id="step-1-set-up-react-app-🏗">Step 1: Set up React App 🏗</a></h3><p>We will use <code>create-react-app</code> to generate a stock React app. We'll call our app <code>react-hook-form-file-input</code>.</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-DlAuH" id="cm-DlAuH">npx create-react-app react-hook-form-file-input</textarea><p>Once the app is ready, we can navigate into the folder and install <code><a href="https://react-hook-form.com/" rel="noopener noreferrer nofollow">react-hook-form</a></code>.</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-WiE8q" id="cm-WiE8q">cd react-hook-form-file-input
yarn add react-hook-form</textarea><h3><a name="step-2-defining-our-form-📋" id="step-2-defining-our-form-📋">Step 2: Defining our form 📋</a></h3><p>Let us define our form in the <code>app.js</code> file. We can remove all the default markup added by <code>create-react-app</code>, and add a <code>form</code> element which contains a file input and a submit button like so:<br></p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-swSIx" id="cm-swSIx">import React from "react";

function App() {
  return (
    &lt;form&gt;
      &lt;input type="file" name="picture" /&gt;
      &lt;button&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  );
}

export default App;
</textarea><p></p><h3><a name="step-3-adding-react-hook-form-🪝" id="step-3-adding-react-hook-form-🪝">Step 3: Adding <code>react-hook-form 🪝</code></a></h3><p>We can now connect our <code>form</code> element to <code>react-hook-form</code> using the <code>useForm</code> hook. <code>useForm</code> returns an object containing a <code>register</code> function which, as the name suggests, connects a given element with <code>react-hook-form</code>. </p><p>We need to pass the <code>register</code> function as a <code>ref</code> into each element we want to connect.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-h37B5" id="cm-h37B5">import React from "react";
import { useForm } from "react-hook-form";

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

  return (
    &lt;form&gt;
      &lt;input ref={register} type="file" name="picture" /&gt;
      &lt;button&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  );
}

export default App;
</textarea><p>Now that our file input has been registered, we can handle submissions by adding an <code>onSubmit</code> handler to the form. The <code>useForm</code> hook also returns a <code>handleSubmit</code> function with which we will wrap our <code>onSubmit</code> handler.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-tYC4s" id="cm-tYC4s">import React from "react";
import { useForm } from "react-hook-form";

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

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

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

export default App;
</textarea><p>The <code>data</code> parameter that is passed to <code>onSubmit</code> is an object whose keys are the names of the fields, and values are the values of the respective fields.</p><p>In our case, <code>data</code> will have just one key - <code>picture</code>, whose value will be a <code>FileList</code>.</p><h3><a name="step-4-try-it-out-🚀" id="step-4-try-it-out-🚀">Step 4: Try it out! 🚀</a></h3><p>When we fire up the app using <code>yarn start</code>, we will see this on screen.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201129200642568_Screenshot%202020-11-29%20at%2020.06.23.png" attachmentid="e057f81b-c576-4cbc-9b82-bf3b308a5b1b" contenteditable="false" data-width="936" data-height="576"><div></div></figure><p>On choosing a file and clicking 'Submit', details about the uploaded file will be logged to the console.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201129200558182_Screenshot%202020-11-29%20at%2020.05.00.png" attachmentid="b8b55908-0248-4fd0-bade-41a5560b6efa" contenteditable="false" data-width="1226" data-height="530"><div></div></figure><p></p><p>Now that we have learnt how to work with file inputs using <code>react-hook-form</code>, let us look at a slightly more advanced use case for uploading files to <a href="https://firebase.google.com/" rel="noopener noreferrer nofollow">Firebase</a>.</p><h2><a name="part-2-uploading-files-to-firebase" id="part-2-uploading-files-to-firebase">Part 2: Uploading files to Firebase</a></h2><h3><a name="step-1-clone-the-code-👩‍💻" id="step-1-clone-the-code-👩‍💻">Step 1: Clone the code 👩‍💻</a></h3><p>You can find the code for the Firebase file upload example <a href="https://github.com/satansdeer/firebase-file-upload" rel="noopener noreferrer nofollow">here</a>. Clone the repo and run <code>yarn</code> to install the dependencies.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-0JYtX" id="cm-0JYtX">git clone https://github.com/satansdeer/firebase-file-upload
yarn</textarea><p>You can set up your Firebase configuration in the <code>.firebaserc</code> and <code>firebase.json</code> files at the root of the project, and log into Firebase using the <a href="https://firebase.google.com/docs/cli" rel="noopener noreferrer nofollow">CLI</a>.</p><h3><a name="step-2-add-react-hook-form" id="step-2-add-react-hook-form">Step 2: Add <code>react-hook-form</code></a></h3><p>As we've seen earlier, we can install <code>react-hook-form</code> via <code>yarn</code> using:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-8uYTa" id="cm-8uYTa">yarn add react-hook-form</textarea><p>The <code>App.js</code> file contains a file input which uploads a file to Firebase.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-MEl6G" id="cm-MEl6G">import React from 'react';
import './App.css';
import {app} from './base'

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

  return (
    &lt;input type="file" onChange={onChange}/&gt;
  );
}

export default App;
</textarea><p>We can now switch it over to use <code>react-hook-form</code> like so:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-Qc242" id="cm-Qc242">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) =&gt; {
    const file = data.image[0];
    const storageRef = app.storage().ref();
    const fileRef = storageRef.child(file.name);
    fileRef.put(file).then(() =&gt; {
      console.log("Uploaded a file");
    });
  };

  return (
    &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
      &lt;input
        ref={register}
        name="image"
        type="file" /&gt;
    &lt;/form&gt;
  );
}

export default App;
</textarea><p>We have wrapped the <code>input</code> element with a <code>form</code>, given it a <code>name</code> and registered it with <code>react-hook-form</code>.</p><p>We have also moved all the logic in the <code>onChange</code> event handler into our <code>onSubmit</code> handler which receives the data from <code>react-hook-form</code>.</p><h3><a name="step-3-try-it-out-🚀" id="step-3-try-it-out-🚀">Step 3: Try it out! 🚀</a></h3><p>We can run the app using the <code>yarn start</code> command and it will look the same as earlier.</p><figure class="photo figure-position-null"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201129200642568_Screenshot%202020-11-29%20at%2020.06.23.png" attachmentid="e057f81b-c576-4cbc-9b82-bf3b308a5b1b" contenteditable="false" data-width="936" data-height="576"><div></div></figure><p>Choosing a file and clicking 'Submit' will upload it to Firebase.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20201129203443343_Screenshot%202020-11-29%20at%2020.34.06.png" attachmentid="08b2a9c7-a96f-4dc6-9025-0edb0f7455d6" contenteditable="false" data-width="1654" data-height="1110"><div></div></figure><p></p><p>We have now learnt how to work with file inputs using <code>react-hook-form</code>. ✅</p><p>The code used in this article is available at  <a href="https://github.com/satansdeer/react-hook-form-file-input" rel="noopener noreferrer nofollow">https://github.com/satansdeer/react-hook-form-file-input</a> and <a href="https://github.com/satansdeer/firebase-file-upload" rel="noopener noreferrer nofollow">https://github.com/satansdeer/firebase-file-upload</a>.</p>

AUTHOR

Maksim Ivanov

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

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Handling File Fields using React Hook Form

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript