React file upload form
Build a file upload form in React with no backend and no upload API. The component posts multipart FormData straight to Formpaste, so the file lands in your inbox with the other fields. Copy the code and add your access key.
How to build it
- Create a form in your Formpaste dashboard and copy its access key.
- Connect Storage in the dashboard so the form can accept uploads.
- Copy the component below, add your access key, then deploy.
Prompt for your AI coding agent
Add a Formpaste file upload form to my React app. Use a component with a file input that POSTs the raw FormData (multipart/form-data, not URLSearchParams) to https://api.formpaste.com/submit with a hidden access_key input. Do not build an upload endpoint of my own.Or connect the Formpaste MCP server to Claude Code, Codex, Cursor, Claude Desktop, VS Code, or any mcp-remote client. See the setup guide.
React gotchas
A React contact form is just a component with a submit handler that POSTs to Formpaste. There is no backend and no API route of your own. Put the fetch in a component that runs in the browser and you are done.
It is a client component
The onSubmit fetch runs in the browser, so the form lives in a normal client component. In a plain React SPA every component is already client-side; in a framework with server components, add the client boundary where the fetch runs.
No API route, no proxy
You do not POST to your own /api endpoint and forward from there. The component posts straight to the Formpaste endpoint, which removes a whole server round-trip and a mailer you would otherwise write.
Controlled or uncontrolled, both work
Read values from a FormData over the form element (uncontrolled) or from useState (controlled). Uncontrolled is less code for a simple contact form; controlled is handy when you validate as the user types.
Handle the response in state
The endpoint returns JSON (success, message, id). Await the fetch and set a piece of state to show your own success or error UI, or set a redirect in the dashboard and skip the client handling.
What to get right
A file means multipart, not urlencoded
As soon as the form has a file input, it must post multipart form data. The generated code sets enctype and sends the raw FormData, so the file rides along with the other fields. No upload endpoint of your own is needed.
The upload is client to Formpaste, direct
The browser posts the file straight to Formpaste, so your app never buffers or parses the upload. That sidesteps serverless body-size and runtime limits entirely.
Set expectations on size and type
Tell people what you accept. File uploads are a Pro feature; connect Storage in the dashboard first, and keep the input honest about accepted types and size.
How it works
Three simple steps for form submissions to land in your email inbox.
Create your form, set your form's action URL to Formpaste's endpoint, and add your access key.
Create your form
Sign up, verify your email, and create an access key in your dashboard.
Copy the code
Paste the snippet above into your project. Pick CSS or Tailwind to match your site.
import { useState } from "react";
const ENDPOINT = "https://api.formpaste.com/submit";
export function FileUploadForm() {
const [status, setStatus] = useState("idle");
async function submit(e) {
e.preventDefault();
setStatus("sending");
const form = new FormData(e.currentTarget);
const res = await fetch(ENDPOINT, { method: "POST", body: form });
setStatus(res.ok ? "ok" : "error");
}
if (status === "ok") return <p>Thanks - your file was uploaded.</p>;
return (
<form onSubmit={submit} encType="multipart/form-data">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" />
<input name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<input type="file" name="file" required />
<button type="submit" disabled={status === "sending"}>Upload</button>
</form>
);
}
Add your access key
Replace the placeholder with your access key to start receiving submissions.
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">React file upload form FAQ
Paste a form. Get submissions.
Instantly without setting up any backend, servers or databases. 250 submissions/mo free - no credit card.