Formpaste

Vite file upload form

Build a file upload form in a Vite app with no backend. The component posts multipart FormData to Formpaste, with the endpoint kept in a Vite env var. Copy the code and add your access key - uploads land in your inbox.

How to build it

  1. Create a form in your Formpaste dashboard and copy its access key.
  2. Connect Storage in the dashboard, and add VITE_FORMPASTE_ENDPOINT to your .env.
  3. Copy the component below, add your access key, then build and deploy.

Prompt for your AI coding agent

Add a Formpaste file upload form to my Vite app. Use a component with a file input that reads the endpoint from import.meta.env.VITE_FORMPASTE_ENDPOINT and POSTs the raw FormData (multipart/form-data) with a hidden access_key input. No server, no 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.

Vite gotchas

A Vite app (React or Vue) is a static SPA build, so a Formpaste form is a component that posts to an endpoint. Keep the endpoint in a Vite env var and the form works with no server and no API route.

Put the endpoint in an env var

Expose it as import.meta.env.VITE_FORMPASTE_ENDPOINT (Vite only exposes vars prefixed with VITE_ to the client). That keeps the URL out of your components and easy to change per environment.

No dev server proxy needed

You do not need a Vite dev-server proxy or a backend route. The component posts straight to the Formpaste endpoint in both dev and production.

Works for the React and the Vue template

Vite scaffolds React or Vue. Either way the form is a component with a submit handler that fetches the endpoint - use the React or the Vue code from the toggle above to match your template.

Static output, deploy anywhere

vite build produces static assets that post to an external endpoint, so the app deploys to any static host with the form working out of the box.

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.

1

Create your form

Sign up, verify your email, and create an access key in your dashboard.

2

Copy the code

Paste the snippet above into your project. Pick CSS or Tailwind to match your site.

import { useState } from "react";

const ENDPOINT = import.meta.env.VITE_FORMPASTE_ENDPOINT;

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>
  );
}
3

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">

Vite 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.

Start freeRead the docs