⚡Fullstack

Datei Upload Feature bauen

Datei-Upload mit Drag & Drop und Cloud Storage

Datei-Uploads sind in fast jeder App noetig -- Profilbilder, Dokumente, Attachments. Mit UploadThing baust du einen kompletten Upload in unter 10 Minuten.

Pro-Tip — Der schnelle Weg

Setze immer ein Dateigroessen-Limit und erlaubte Dateitypen serverseitig. Client-Validierung kann umgangen werden -- die Server-Validierung nicht.

Seite 1

UploadThing einrichten

Installiere UploadThing und erstelle einen Account fuer den kostenlosen Storage.

npm install uploadthing @uploadthing/react

# .env.local
UPLOADTHING_TOKEN=...

File Router definieren

Definiere welche Dateitypen und Groessen erlaubt sind.

// app/api/uploadthing/core.ts
import { createUploadthing, type FileRouter } from "uploadthing/next";

const f = createUploadthing();

export const ourFileRouter = {
imageUploader: f({ image: { maxFileSize: "4MB", maxFileCount: 1 } })
.onUploadComplete(async ({ file }) => {
console.log("Upload fertig:", file.url);
}),
documentUploader: f({ pdf: { maxFileSize: "16MB" } })
.onUploadComplete(async ({ file }) => {
console.log("Dokument:", file.url);
}),
} satisfies FileRouter;

API-Route erstellen

Verbinde den File Router mit einer Next.js API-Route.

// app/api/uploadthing/route.ts
import { createRouteHandler } from "uploadthing/next";
import { ourFileRouter } from "./core";

export const { GET, POST } = createRouteHandler({ router: ourFileRouter });

Upload-Komponente einbauen

Nutze die fertige UploadButton oder UploadDropzone Komponente.

"use client";
import { UploadButton, UploadDropzone } from "@uploadthing/react";
import type { OurFileRouter } from "@/app/api/uploadthing/core";
import { useState } from "react";

export default function UploadPage() {
const [imageUrl, setImageUrl] = useState("");

return (
<div className="p-8 space-y-6">
<h1 className="text-2xl font-bold">Bild hochladen</h1>
<UploadDropzone<OurFileRouter, "imageUploader">
endpoint="imageUploader"
onClientUploadComplete={(res) => {
setImageUrl(res[0].url);
}}
onUploadError={(error) => {
alert("Fehler: " + error.message);
}}
/>
{imageUrl && <img src={imageUrl} alt="Upload" className="w-64 rounded" />}
</div>
);
}

Seite 2

Warum das funktioniert

UploadThing handelt Pre-signed URLs, Storage und CDN -- du musst nur einbinden
Server-side Validierung schuetzt vor zu grossen oder falschen Dateien
Drag & Drop Dropzone funktioniert out of the box ohne eigenes Styling

Tipps

UploadThing hat 2 GB kostenlosen Storage -- perfekt zum Starten
Fuer Profilbilder: Nutze imageUploader mit maxFileSize 2MB und maxFileCount 1
Die Upload-URL kommt direkt im onClientUploadComplete Callback zurueck

Seite 3

Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen