fix: prevent media upload OOM on Workers for large images (#262)

* fix: prevent media upload OOM on Workers via client thumbnails + server safety net

Large image uploads (5MB+) crash Cloudflare Workers (128MB limit) because
generatePlaceholder() decodes entire images to raw RGBA pixels. A 4000x3000
JPEG becomes ~48MB RGBA, exceeding the isolate memory budget.

Two-layer fix:
- Client-side: browser generates a 64px canvas thumbnail for oversized images
  and sends it alongside the upload. Server generates blurhash from the
  thumbnail (~16KB RGBA) instead of decoding the full image.
- Server-side: reads dimensions from image headers via image-size and skips
  placeholder generation when estimated decoded size exceeds 32MB. This covers
  API/CLI uploads that don't provide thumbnails.

* chore: add changeset for media upload OOM fix

* fix: clamp upload thumbnail to 64x64 box for extreme aspect ratios

Naive sizing (thumbW=64, thumbH=(h/w)*64) could produce an enormous canvas
for very tall or very wide images — e.g. a 100x840000 image would allocate
a 64x537600 canvas client-side, reintroducing the memory blowup this feature
exists to prevent.

Extract computeThumbnailSize() that fits the image within a 64x64 box by
scaling against max(width, height), wrap canvas allocation and drawImage
in try/catch with a no-thumbnail fallback, and add unit tests covering
extreme aspect ratios.

---------

Co-authored-by: Matt Kane <mkane@cloudflare.com>

packages/core/tests/unit/media/placeholder.test.ts

@@ -78,4 +78,66 @@ describe("generatePlaceholder", () => {
 		// Blurhash string length should be reasonable (not huge from 100x100)
 		expect(result!.blurhash.length).toBeLessThan(50);
 	});
+
+	it("returns null when image dimensions from headers exceed memory budget", async () => {
+		// Minimal valid JPEG with SOF0 declaring 5000x4000 dimensions.
+		// SOF0 marker (FFC0) stores height (2 bytes) then width (2 bytes).
+		// 5000×4000×4 = 80 MB > 32 MB threshold.
+		const sof0 = new Uint8Array([
+			0xff,
+			0xd8, // SOI
+			0xff,
+			0xe0,
+			0x00,
+			0x10, // APP0 marker + length
+			0x4a,
+			0x46,
+			0x49,
+			0x46,
+			0x00, // "JFIF\0"
+			0x01,
+			0x01,
+			0x00,
+			0x00,
+			0x01,
+			0x00,
+			0x01,
+			0x00,
+			0x00, // JFIF fields
+			0xff,
+			0xc0,
+			0x00,
+			0x0b, // SOF0 marker + length
+			0x08, // precision
+			0x0f,
+			0xa0, // height = 4000
+			0x13,
+			0x88, // width = 5000
+			0x01, // number of components
+			0x01,
+			0x11,
+			0x00, // component
+		]);
+		const result = await generatePlaceholder(sof0, "image/jpeg");
+		expect(result).toBeNull();
+	});
+
+	it("returns null when fallback dimensions exceed memory budget", async () => {
+		// Unrecognizable buffer — image-size can't parse it, so fallback dims are used
+		const buffer = new Uint8Array([0x00, 0x01, 0x02, 0x03]);
+		const result = await generatePlaceholder(buffer, "image/jpeg", {
+			width: 5000,
+			height: 4000,
+		});
+		expect(result).toBeNull();
+	});
+
+	it("still generates placeholder for small images with dimensions param", async () => {
+		const result = await generatePlaceholder(new Uint8Array(JPEG_4x4), "image/jpeg", {
+			width: 4,
+			height: 4,
+		});
+		expect(result).not.toBeNull();
+		expect(result!.blurhash).toBeTruthy();
+	});
 });

packages/core/tests/unit/media/thumbnail.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+
+import { THUMBNAIL_MAX_DIMENSION, computeThumbnailSize } from "../../../src/media/thumbnail.js";
+
+describe("computeThumbnailSize", () => {
+	it("scales a square image to the max dimension", () => {
+		expect(computeThumbnailSize(5000, 5000)).toEqual({
+			width: THUMBNAIL_MAX_DIMENSION,
+			height: THUMBNAIL_MAX_DIMENSION,
+		});
+	});
+
+	it("scales a wide image to fit within the bounding box", () => {
+		const result = computeThumbnailSize(4000, 2000);
+		expect(result.width).toBe(THUMBNAIL_MAX_DIMENSION);
+		expect(result.height).toBe(THUMBNAIL_MAX_DIMENSION / 2);
+	});
+
+	it("scales a tall image to fit within the bounding box", () => {
+		const result = computeThumbnailSize(2000, 4000);
+		expect(result.width).toBe(THUMBNAIL_MAX_DIMENSION / 2);
+		expect(result.height).toBe(THUMBNAIL_MAX_DIMENSION);
+	});
+
+	it("clamps extreme tall aspect ratios to the bounding box", () => {
+		// Without clamping, naive code would produce a 64×537600 canvas.
+		const result = computeThumbnailSize(100, 840_000);
+		expect(result.width).toBeLessThanOrEqual(THUMBNAIL_MAX_DIMENSION);
+		expect(result.height).toBeLessThanOrEqual(THUMBNAIL_MAX_DIMENSION);
+		expect(result.width).toBeGreaterThanOrEqual(1);
+		expect(result.height).toBe(THUMBNAIL_MAX_DIMENSION);
+	});
+
+	it("clamps extreme wide aspect ratios to the bounding box", () => {
+		const result = computeThumbnailSize(840_000, 100);
+		expect(result.width).toBe(THUMBNAIL_MAX_DIMENSION);
+		expect(result.height).toBeGreaterThanOrEqual(1);
+		expect(result.height).toBeLessThanOrEqual(THUMBNAIL_MAX_DIMENSION);
+	});
+
+	it("never upscales smaller images", () => {
+		expect(computeThumbnailSize(10, 20)).toEqual({ width: 10, height: 20 });
+		expect(computeThumbnailSize(1, 1)).toEqual({ width: 1, height: 1 });
+	});
+
+	it("returns a 1x1 fallback for zero or negative dimensions", () => {
+		expect(computeThumbnailSize(0, 100)).toEqual({ width: 1, height: 1 });
+		expect(computeThumbnailSize(100, 0)).toEqual({ width: 1, height: 1 });
+		expect(computeThumbnailSize(-5, 10)).toEqual({ width: 1, height: 1 });
+	});
+
+	it("rounds fractional dimensions", () => {
+		const result = computeThumbnailSize(300, 199);
+		expect(Number.isInteger(result.width)).toBe(true);
+		expect(Number.isInteger(result.height)).toBe(true);
+	});
+});