Serverless file uploads with Supabase Storage and Next.js API routes

File uploads are where a lot of apps quietly become insecure. The pattern below keeps validation on the server and never trusts the client's file type.

Prefer signed uploads

For anything user-generated, hand the client a short-lived signed URL instead of proxying the bytes through your function.

export async function POST(request: Request) {
  const { filename, contentType, size } = await request.json();

  if (size > 5 * 1024 * 1024) {
    return new Response("File too large", { status: 413 });
  }

  const path = `${crypto.randomUUID()}-${sanitize(filename)}`;
  const { data, error } = await supabase.storage
    .from("uploads")
    .createSignedUploadUrl(path);

  if (error) return new Response("Upload failed", { status: 500 });
  return Response.json({ path, token: data.token, contentType });
}

The client uploads directly to storage, which keeps your function fast and cheap.

Validate on the server, always

The contentType a browser sends is a claim. Verify the actual bytes before making a file public.

• Check the magic number, not the extension
• Enforce a maximum size
• Generate the stored path yourself

Control public access

Buckets are private by default. Keep them that way and serve through signed download URLs.

const { data } = await supabase.storage
  .from("uploads")
  .createSignedUrl(path, 60 * 60);

Clean up after yourself

Uploads are storage costs. Delete what is no longer referenced.

Never trust a filename from the client. Generate your own identifiers.

Signed URLs, server-side validation, and a cleanup job are the whole checklist.