Dokumentation

Speicher (Cloudflare R2)

Cloudflare-R2-Dateispeicher — Bucket-Setup, Credentials, vorsignierte Uploads und S3-kompatible API.

Motoko Base nutzt Cloudflare R2 für Dateispeicher. R2 ist S3-kompatibel — die App verwendet das AWS SDK mit einem benutzerdefinierten Endpoint.

Official docs: Cloudflare R2 documentation

Setup

Erstelle einen R2-Bucket im Cloudflare dashboard → R2
Erstelle ein R2 API token (Object Read & Write)
Setze Env-Vars:

Variable	Purpose
`R2_ACCOUNT_ID`	Cloudflare account ID
`R2_ACCESS_KEY_ID`	API token access key
`R2_SECRET_ACCESS_KEY`	API token secret
`R2_BUCKET_NAME`	Bucket name (optional `/prefix` suffix)
`R2_PREFIX`	Optional key prefix override
`R2_ENDPOINT`	Optional custom endpoint

Ohne R2-Env-Vars startet die App — das Storage-Demo zeigt eine Konfigurationsmeldung.

How uploads work

Client → Server Action (presigned PUT URL)
   ↓
Browser uploads directly to R2
   ↓
Server validates (HEAD) → marks file ready in Postgres

Dateien werden nie über Next.js proxied. Der Server stellt eine vorsignierte URL aus; der Browser lädt zu R2 hoch. Metadaten (Name, Größe, Eigentümer) liegen in der Tabelle files.

Upload-Limits und erlaubte MIME-Types: src/features/storage/config.ts.

S3-compatible API

R2-Client: src/lib/r2.ts — nutzt @aws-sdk/client-s3 mit:

Endpoint: https://{R2_ACCOUNT_ID}.r2.cloudflarestorage.com
Region: auto
Path-style URLs (forcePathStyle: true)

Vorsignierte PUT- (Upload) und GET- (Download) URLs laufen nach 10–15 Minuten ab.

Production

Nutze einen privaten Bucket — Zugriff nur über vorsignierte URLs
Setze Credentials als server-only Env-Vars (nie NEXT_PUBLIC_*)
Avatare (Settings) nutzen bei Konfiguration ebenfalls R2 — dieselben Credentials
Erwäge Lifecycle-Regeln in Cloudflare für alte Objekte — nicht im Starter enthalten

Für CORS: Wenn Browser-Uploads fehlschlagen, füge den App-Origin zur Bucket-CORS-Policy in Cloudflare hinzu. Siehe R2 CORS docs.

Where to change this

What	Where
R2 client & presigned URLs	`src/lib/r2.ts`
Upload actions & validation	`src/features/storage/actions.ts`
File metadata queries	`src/features/storage/queries.ts`
Limits & MIME allowlist	`src/features/storage/config.ts`
Storage UI	`src/features/storage/components/dashboard/storage-page.tsx`

Importiere @/lib/r2 nur aus Server-Code — nie aus Client Components.

Environment Variables — alle R2-Env-Vars.