fix(drawings): rewrite preview SVG so it doesn't inline base64 after S3 upload

Symptom: every save produced a megabyte-scale `Drawing.preview`
column. The SVG had `<image href="data:image/png;base64,...">` for
each image element instead of the S3 URL.

Root cause: the frontend generates the preview SVG from the canvas
state at save time, before the round-trip uploads files to S3. The
SVG embeds whatever dataURL the file currently has, which at save
time is still base64. processFilesForS3 only rewrites the dataURL
inside `Drawing.files`, never the parallel preview SVG, so the
inlined base64 stays in the preview forever.

Add a rewritePreviewForS3 helper in fileProcessing.ts that diffs the
original-vs-processed files map and applies the resulting URL
substitutions to the preview string. Wire it into the POST and PUT
handlers so the preview saved alongside the upload reflects the same
S3 URLs as Drawing.files.

Best-effort string substitution: it works because the same dataURL
string is character-identical in both `files[fileId].dataURL` and the
preview SVG's href. If frontend encoding ever diverges, the worst
case is the preview is left as-is — never crashes.

Change-Id: I427edabcccc1453bf0f69f5dde33c9648cfcb370
Co-developed-by: Claude <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: OhYee

backend/src/fileProcessing.ts

@@ -113,3 +113,47 @@ export const processFilesForS3 = async (
 
   return result;
 };
+
+/**
+ * Rewrite an Excalidraw preview SVG so any base64 dataURL that has just
+ * been uploaded to S3 is replaced by the resulting S3 / redirect URL.
+ *
+ * The frontend generates the preview SVG from the canvas state at save
+ * time, *before* the round-trip to the backend uploads the files; the
+ * SVG embeds whatever dataURL the file currently has in `Drawing.files`.
+ * Without this rewrite, every save produces a megabyte-scale preview
+ * with the full image base64 inlined, even though the image itself is
+ * already in S3 (the diff between Drawing.files's processed entries
+ * and the preview field gets ever larger over time).
+ *
+ * Best-effort string substitution: works because the same dataURL
+ * string is character-identical in both `files[fileId].dataURL` and
+ * the preview SVG's `<image href="...">` attribute. If frontend
+ * encoding ever diverges, the worst case is the preview is left as-is.
+ */
+export const rewritePreviewForS3 = (
+  preview: unknown,
+  originalFiles: Record<string, any>,
+  processedFiles: Record<string, any>,
+): unknown => {
+  if (typeof preview !== "string" || preview.length === 0) {
+    return preview;
+  }
+  let rewritten = preview;
+  for (const fileId of Object.keys(processedFiles)) {
+    const original = originalFiles[fileId];
+    const processed = processedFiles[fileId];
+    if (
+      !original ||
+      !processed ||
+      typeof original.dataURL !== "string" ||
+      typeof processed.dataURL !== "string" ||
+      original.dataURL === processed.dataURL ||
+      !original.dataURL.startsWith("data:")
+    ) {
+      continue;
+    }
+    rewritten = rewritten.split(original.dataURL).join(processed.dataURL);
+  }
+  return rewritten;
+};

backend/src/routes/dashboard/drawings.ts

@@ -8,6 +8,7 @@ import {
   copyS3Object,
   drawingS3Prefix,
 } from "../../s3";
+import { rewritePreviewForS3 } from "../../fileProcessing";
 import { DashboardRouteDeps, SortDirection, SortField } from "./types";
 import {
   getUserTrashCollectionId,
@@ -408,11 +409,20 @@ export const registerDrawingRoutes = (
     }
 
     const drawingId = crypto.randomUUID();
+    const originalFiles = (payload.files ?? {}) as Record<string, any>;
     const processedFiles = await processFilesForS3(
-      (payload.files ?? {}) as Record<string, any>,
+      originalFiles,
       req.user.id,
       drawingId
     );
+    // Rewrite the preview SVG so it points at the just-uploaded S3 URLs
+    // instead of inlining the megabyte-scale base64 dataURL the frontend
+    // generated before the upload completed.
+    const processedPreview = rewritePreviewForS3(
+      payload.preview ?? null,
+      originalFiles,
+      processedFiles,
+    ) as string | null | undefined;
 
     const newDrawing = await prisma.drawing.create({
       data: {
@@ -422,7 +432,7 @@ export const registerDrawingRoutes = (
         appState: JSON.stringify(payload.appState),
         userId: req.user.id,
         collectionId: targetCollectionId,
-        preview: payload.preview ?? null,
+        preview: processedPreview ?? null,
         files: JSON.stringify(processedFiles),
       },
     });
@@ -521,14 +531,27 @@ export const registerDrawingRoutes = (
         }
       }
 
+      const originalFiles = payload.files as Record<string, any>;
       const processedFiles = await processFilesForS3(
-        payload.files as Record<string, any>,
+        originalFiles,
         existingDrawing.userId,
         id
       );
       data.files = JSON.stringify(processedFiles);
+
+      if (payload.preview !== undefined) {
+        // Rewrite preview so the SVG embeds the new S3 URLs instead of
+        // the original base64 dataURLs (the frontend generates the
+        // preview before this round-trip uploads the files).
+        data.preview = rewritePreviewForS3(
+          payload.preview,
+          originalFiles,
+          processedFiles,
+        ) as string | null | undefined;
+      }
+    } else if (payload.preview !== undefined) {
+      data.preview = payload.preview;
     }
-    if (payload.preview !== undefined) data.preview = payload.preview;
 
     if (payload.collectionId !== undefined) {
       if (!isOwnerAccess(access)) {