Vite-Datei-Upload-Formular

Baue ein Datei-Upload-Formular in einer Vite-App ganz ohne Backend. Die Komponente postet multipart FormData an Formpaste, wobei der Endpunkt in einer Vite-Umgebungsvariable steht. Kopiere den Code und ergänze deinen Zugangsschlüssel - Uploads landen in deinem Posteingang.

So baust du es

Erstelle ein Formular in deinem Formpaste-Dashboard und kopiere den Zugangsschlüssel.
Verbinde Storage im Dashboard und ergänze VITE_FORMPASTE_ENDPOINT in deiner .env.
Kopiere die untenstehende Komponente, ergänze deinen Zugangsschlüssel, dann bauen und deployen.

Prompt für deinen KI-Coding-Agenten

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.

Oder verbinde den Formpaste-MCP-Server mit Claude Code, Codex, Cursor, Claude Desktop, VS Code oder einem beliebigen mcp-remote-Client. Zur Einrichtungsanleitung.

Vite-Fallstricke

Eine Vite-App (React oder Vue) ist ein statischer SPA-Build, ein Formpaste-Formular ist also eine Komponente, die an einen Endpunkt postet. Hinterlege den Endpunkt in einer Vite-Umgebungsvariable, dann funktioniert das Formular ganz ohne Server und ohne API-Route.

Den Endpunkt in eine Umgebungsvariable legen

Stelle ihn als import.meta.env.VITE_FORMPASTE_ENDPOINT bereit (Vite gibt nur Variablen mit dem Prefix VITE_ an den Client weiter). So bleibt die URL aus deinen Komponenten heraus und lässt sich pro Umgebung leicht ändern.

Kein Dev-Server-Proxy nötig

Du brauchst weder einen Vite-Dev-Server-Proxy noch eine Backend-Route. Die Komponente postet sowohl in der Entwicklung als auch in Produktion direkt an den Formpaste-Endpunkt.

Funktioniert für das React- und das Vue-Template

Vite scaffoldet React oder Vue. So oder so ist das Formular eine Komponente mit einem Submit-Handler, der den Endpunkt aufruft - nutze den React- oder den Vue-Code aus dem Umschalter oben passend zu deinem Template.

Statischer Output, überall deploybar

vite build erzeugt statische Assets, die an einen externen Endpunkt posten, die App lässt sich also auf jedem statischen Host deployen, wobei das Formular sofort funktioniert.

Worauf es ankommt

Eine Datei bedeutet multipart, nicht urlencoded

Sobald das Formular ein Datei-Feld enthält, muss es multipart Formulardaten senden. Der generierte Code setzt enctype und schickt das rohe FormData, sodass die Datei zusammen mit den anderen Feldern mitläuft. Du brauchst keinen eigenen Upload-Endpunkt.

Der Upload geht direkt vom Client zu Formpaste

Der Browser sendet die Datei direkt an Formpaste, sodass deine App den Upload nie puffert oder parst. Damit umgehst du Größen- und Laufzeitlimits von serverlosen Umgebungen komplett.

Setz klare Erwartungen bei Größe und Typ

Sag den Leuten, was du akzeptierst. Datei-Uploads sind ein Pro-Feature; verbinde zuerst Storage im Dashboard und halte das Feld ehrlich, was akzeptierte Typen und Größe angeht.

So funktioniert es

Drei einfache Schritte, bis Formular-Einsendungen in deinem E-Mail-Posteingang landen.
Erstelle dein Formular, setze die action-URL auf den Formpaste-Endpunkt und trage deinen Zugangsschlüssel ein.

1

Formular erstellen

Melde dich an, verifiziere deine E-Mail und erstelle einen Zugangsschlüssel im Dashboard.

2

Code kopieren

Füge das Snippet oben in dein Projekt ein. Wähle CSS oder Tailwind passend zu deiner Website.

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

Zugangsschlüssel hinzufügen

Ersetze den Platzhalter durch deinen Zugangsschlüssel, um Einsendungen zu empfangen.

<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">

Vite-Datei-Upload-Formular FAQ

Formular einfügen. Einsendungen erhalten.

Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.

Kostenlos starten Dokumentation lesen