Blog
Datei-Uploads auf einer statischen Website: Ihre echten Optionen
· 3 Min. Lesezeit
Textfelder sind einfach - die schwierige Frage kommt mit dem Briefing, das sagt: „und Bewerber sollen einen Lebenslauf anhängen.“ Eine statische Website kann keine Datei empfangen; es gibt keinen Server, der sie entgegennehmen könnte. Hier sind die tatsächlichen Optionen, von der schlechtesten zur besten.
Option 1: „Schicken Sie es uns per E-Mail“ (die Kapitulation)
Bitten Sie Nutzer, Anhänge per E-Mail zu senden. Das funktioniert, rein technisch, wie ein Faxgerät: Die Datei kommt losgelöst von den Formulardaten in einem Postfach an, ohne Struktur und ohne Größenkontrolle. Bei allem Wiederkehrenden - Bewerbungen, Support-Anhänge, Druckdateien - wird daraus dauerhaft manuelle Ablage.
Option 2: direkte Uploads in den Cloud-Speicher (die DIY-Route)
Frontend-JavaScript kann direkt in den Objektspeicher hochladen (S3-artige presigned URLs). Das ist eine legitime Architektur - und überraschend viel Arbeit, um es sicher umzusetzen: Irgendetwas muss diese presigned URLs erzeugen (Sie schreiben also doch eine serverlose Funktion), Sie implementieren Größen- und Typvalidierung selbst, verknüpfen die hochgeladene Datei mit der Formular-Einsendung, zu der sie gehört, und entscheiden, wo auf der Welt dieser Bucket liegt - was in dem Moment wichtig wird, in dem die Uploads personenbezogene Daten wie Lebensläufe enthalten.
Wählen Sie diese Option, wenn Uploads Ihr Produkt sind. Für „eine Datei an ein Formular anhängen“ ist das eine Menge Verrohrung.
Option 3: Multipart über ein Formular-Backend (die langweilige, richtige Lösung)
HTML unterstützt Datei-Felder seit gefühlt jeher:
<form action="https://formhook.app/f/fh_your-key"
method="POST" enctype="multipart/form-data">
<input type="email" name="email" required>
<textarea name="message" required></textarea>
<input type="file" name="attachment">
<button type="submit">Send</button>
</form>Was die meisten vergessen, ist enctype="multipart/form-data" - ohne das sendet der Browser den Dateinamen statt der Datei. Empfängt ein Formular-Backend den POST, wird die Datei mit ihrer Einsendung gespeichert: Öffnen Sie die Anfrage im Dashboard, und der Anhang ist direkt da. Größen- und Typ-Limits werden am Endpoint durchgesetzt, und der Spam-Schutz gilt für die gesamte Einsendung, Dateien inbegriffen.
In Formhook sind Datei-Uploads ab dem Pro-Tarif verfügbar, und - der Teil, der für europäische Websites zählt - hochgeladene Dateien werden in Cloudflare R2s EU-Region gespeichert, sodass ein von einem EU-Bewerber angehängter Lebenslauf dieselbe Antwort zur Datenresidenz bekommt wie die Textfelder: Er verlässt die EU nie. (Details zur Speicherung in den Docs.)
Praktische Regeln, egal welche Option Sie wählen
- Schränken Sie die Eingabe ein. Nutzen Sie das
accept-Attribut (accept=".pdf,.png,.jpg") als UX-Hilfe, aber behandeln Sie es als unverbindlich - die echte Validierung passiert am Endpoint. - Sagen Sie Nutzern das Limit, bevor sie es erreichen. „Max. 10 MB“ neben dem Feld schlägt einen Fehler nach einem langsamen Upload.
- Dateien sind auch personenbezogene Daten. Ein Lebenslauf ist wohl sensibler als die Formularfelder drumherum. Aufbewahrungs-, Lösch- und Export-Richtlinien müssen Anhänge abdecken, und die Angabe zum Speicherort in Ihrer Datenschutzerklärung muss sie einschließen. (Siehe die DSGVO-Checkliste.)
- Halten Sie den No-JS-Pfad funktionsfähig. Ein einfaches Multipart-Formular sendet auch ganz ohne Skript problemlos ab; fügen Sie AJAX-Politur obendrauf hinzu, nicht stattdessen.
Das Muster für statische Websites ist etabliert: Die Website bleibt statisch, das Formular-Backend empfängt den Multipart-POST, und die Datei landet neben der Nachricht, mit der sie kam. Das Formular ist immer noch nur ein Attribut - plus ein enctype.
Ein funktionierendes Formular in einer Zeile
In der EU gehostet, Einsendungen für immer aufbewahrt, Push-Benachrichtigungen in jeder Stufe.
Kostenlos startenKeine Kreditkarte · Dokumentation lesen
Weiterlesen
- Was ist ein Formular-Backend? (Und wann Sie eines brauchen)Ein Formular-Backend empfängt, speichert und leitet Ihre Formular-Einsendungen weiter - ohne eigenen Server. So funktionieren sie, wann Sie eines brauchen.
- DSGVO-konforme Kontaktformulare: eine praktische ChecklisteWas die DSGVO von einem Kontaktformular verlangt: Rechtsgrundlage, Datenresidenz, Aufbewahrung, Datenschutzerklärung - eine Checkliste für Entwickler.
- So fügen Sie GitHub Pages ein Kontaktformular hinzuGitHub Pages kann keinen Server-Code ausführen, trotzdem geht ein Kontaktformular. Drei Ansätze im Vergleich, plus eine Copy-paste-Lösung in einer Minute.