Handle file uploads

Step by step

1. 1

   Pick object storage, not your app server or DB

   Use Cloudflare R2, AWS S3, or Supabase Storage. Never store binary blobs in Postgres and never keep them on a serverless filesystem — it's ephemeral. R2 is a good default: S3-compatible API with zero egress fees.

2. 2

   Issue presigned upload URLs from your server

   Add an authenticated endpoint that checks the user is allowed to upload, validates the declared content-type and size, generates its OWN random key (never the client's filename), and returns a short-lived (30-60s) presigned PUT URL. This is the security boundary — enforce limits here, not in the browser.

3. 3

   Upload from the browser straight to storage

   The client does a plain fetch PUT of the raw File to the presigned URL. Bytes never touch your server, so you dodge serverless body-size limits (Vercel caps request bodies around 4.5MB) and function timeouts.

4. 4

   Record metadata after the upload confirms

   On success, call back to your server to write a row (key, owner, size, mime, created_at) with Drizzle ORM. The file object and the DB row are separate systems — without this step you get orphaned files nobody can find.

5. 5

   Serve files privately with signed download URLs

   Keep the bucket private. When someone needs a file, generate a short-lived signed GET URL scoped to that object. Public buckets are how private invoices end up indexed by Google.

6. 6

   Validate and sniff on the server

   Re-check size and MIME server-side, and for images sniff the actual bytes (magic numbers) rather than trusting the Content-Type header. Cap the file size, restrict the allowed types to what you actually need, and consider virus scanning for user-shared files.

7. 7

   Add resumable uploads only if files are large

   For anything over ~50MB or flaky-network scenarios (video, mobile), use Uppy with the tus protocol against a resumable-capable backend so a dropped connection doesn't restart the whole upload. Skip this complexity for avatars and PDFs.

// app/api/upload-url/route.ts — issue a presigned PUT for Cloudflare R2 (S3-compatible)
import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { randomUUID } from "crypto";

const s3 = new S3Client({
  region: "auto",
  endpoint: process.env.R2_ENDPOINT, // R2 / S3 / any S3-compatible store
  credentials: { accessKeyId: process.env.R2_KEY!, secretAccessKey: process.env.R2_SECRET! },
});

const MAX_BYTES = 10 * 1024 * 1024; // 10 MB
const ALLOWED = new Set(["image/png", "image/jpeg", "application/pdf"]);

export async function POST(req: Request) {
  // TODO: check the user is authenticated here before issuing a URL
  const { contentType, size } = await req.json();
  if (!ALLOWED.has(contentType) || size > MAX_BYTES) {
    return Response.json({ error: "File type or size not allowed" }, { status: 400 });
  }
  const key = `uploads/${randomUUID()}`; // generate our own key — never trust client filenames
  const url = await getSignedUrl(
    s3,
    new PutObjectCommand({ Bucket: "my-bucket", Key: key, ContentType: contentType }),
    { expiresIn: 60 }
  );
  return Response.json({ url, key }); // browser PUTs the file straight to `url`, then reports `key` back
}