> For the complete documentation index, see [llms.txt](https://docs.web3forms.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.web3forms.com/how-to-guides/js-frameworks/react-js/react-file-upload-form.md).

# React File Upload Form

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 using React Hook form, Please [see this guide](/how-to-guides/js-frameworks/react-js/react-hook-form-file-upload.md).

{% hint style="warning" %}
Note: File Upload is only available for PRO users.
{% endhint %}

### Live Demo

{% embed url="<https://codesandbox.io/s/react-file-upload-form-o4deqz?file=/src/App.js>" %}
React File Upload Form
{% endembed %}

Here's the code:

```jsx
import React from "react";

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

  const onSubmit = async (event) => {
    event.preventDefault();
    setResult("Sending....");
    const formData = new FormData(event.target);

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

    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 File Upload Form</h1>
      <form onSubmit={onSubmit}>
        <input type="text" name="name"/>
        <input type="email" name="email"/>
        <input type="file" name="attachment" />
        <input type="submit" />
      </form>
      <span>{result}</span>
    </div>
  );
}

export default App;
```