React Hook Form File Upload

File uploading is one of the major features of Web3Forms. Integrating it with React is tricky. Using the following example, you can copy-paste a fully-working React File upload form.

If you are NOT using React Hook form, Please see this guide.

Note: File Upload is only available for PRO users.

Live Demo

https://codesandbox.io/s/react-hook-form-file-upload-km3bsh?file=/src/App.jscodesandbox.io

React Hook Form File Upload

Here's the code:

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

function App() {
  const { register, handleSubmit } = useForm();
  const [result, setResult] = React.useState("");

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

    setResult("Sending....");
    const formData = new FormData();

    formData.append("access_key", "YOUR_ACCESS_KEY_HERE");

    for (const key in data) {
      if (key === "file") {
        formData.append(key, data[key][0]);
      } else {
        formData.append(key, data[key]);
      }
    }

    const res = await fetch("https://api.web3forms.com/submit", {
      method: "POST",
      body: formData
    }).then((res) => res.json());

    if (res.success) {
      console.log("Success", res);
      setResult(res.message);
    } else {
      console.log("Error", res);
      setResult(res.message);
    }
  };

  return (
    <div className="App">
      <h1>React Hook Form File Upload</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input type="text" placeholder="Name" {...register("name")} />
        <br />
        <br />
        <input type="email" placeholder="Email" {...register("email")} />
        <br />
        <br />
        <input type="file" {...register("file")} />
        <br />
        <br />
        <input type="submit" />
      </form>
      <br />
      <span>{result}</span>
    </div>
  );
}

export default App;