Pre-signed S3 upload from the browser

import { Router, Request, Response } from "express";
import { createUploadPolicy } from "./uploadPolicy";

const router = Router();

const ALLOWED_TYPES = ["image/jpeg", "image/png", "image/webp", "application/pdf"];
const MAX_UPLOAD_BYTES = 25 * 1024 * 1024;

router.post("/uploads/presign", async (req: Request, res: Response) => {
  const { contentType, size } = req.body as { contentType?: string; size?: number };
  const userId = req.user?.id;

  if (!userId) {
    return res.status(401).json({ error: "authentication required" });
  }
  if (!contentType || !ALLOWED_TYPES.includes(contentType)) {
    return res.status(400).json({ error: "unsupported content type" });
  }
  if (typeof size !== "number" || size <= 0 || size > MAX_UPLOAD_BYTES) {
    return res.status(400).json({ error: "file too large" });
  }

  const signed = await createUploadPolicy({
    userId,
    contentType,
    maxBytes: MAX_UPLOAD_BYTES,
  });

  return res.json({
    url: signed.url,
    fields: signed.fields,
    key: signed.key,
  });
});

export default router;

import { useCallback, useState } from "react";

interface PresignResponse {
  url: string;
  fields: Record<string, string>;
  key: string;
}

export function useS3Upload() {
  const [progress, setProgress] = useState(0);
  const [error, setError] = useState<string | null>(null);

  const upload = useCallback(async (file: File): Promise<string> => {
    setError(null);
    setProgress(0);

    const presignRes = await fetch("/uploads/presign", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ contentType: file.type, size: file.size }),
    });
    if (!presignRes.ok) throw new Error("failed to obtain upload policy");

    const { url, fields, key }: PresignResponse = await presignRes.json();

    const form = new FormData();
    Object.entries(fields).forEach(([name, value]) => form.append(name, value));
    form.append("file", file); // must be the last field for S3

    await new Promise<void>((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open("POST", url);
      xhr.upload.onprogress = (e) => {
        if (e.lengthComputable) setProgress(Math.round((e.loaded / e.total) * 100));
      };
      xhr.onload = () => {
        if (xhr.status === 204) resolve();
        else reject(new Error(`S3 rejected upload: ${xhr.status}`));
      };
      xhr.onerror = () => reject(new Error("network error during upload"));
      xhr.send(form);
    }).catch((e: Error) => {
      setError(e.message);
      throw e;
    });

    return key;
  }, []);

  return { upload, progress, error };
}