Web3Forms
Search
K
Comment on page

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

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;