fix(files): self-heal image dimensions from the browser instead of server-measuring

Round-3 review: server-side image-size returns raw (non-EXIF) dimensions, and
clearing dims on content swap reopened the stale-PATCH race for non-image or
unmeasurable content. Move authority to the browser's own naturalWidth/Height
(EXIF-correct): the node view reserves from it and reports on any mismatch, and
updateWorkspaceFileDimensions overwrites (no width IS NULL gate) so stale values
self-correct on the next view. Reverts the server-side measurement and the
content-swap dimension touch entirely.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image.tsx

@@ -94,7 +94,10 @@ function ResizableImageView({ node, updateAttributes, selected, editor }: ReactN
     () => source.getImageDimensions?.(attrs.src) ?? null,
     [source, attrs.src]
   )
-  const intrinsicDimensions = storedDimensions ?? measuredDimensions
+  // The browser's post-load measurement is authoritative — EXIF-corrected, and correct even when the
+  // stored value is stale (e.g. left over after the file's content was replaced) — so it wins once
+  // available; stored metadata only reserves the box pre-load. Equal in the common case, so no shift.
+  const intrinsicDimensions = measuredDimensions ?? storedDimensions
   const displayWidth =
     dragWidth !== null
       ? `${dragWidth}px`
@@ -134,11 +137,17 @@ function ResizableImageView({ node, updateAttributes, selected, editor }: ReactN
         setFailed(false)
         const { naturalWidth, naturalHeight } = event.currentTarget
         if (naturalWidth <= 0 || naturalHeight <= 0) return
-        // Guard on the memoized `storedDimensions` the render actually uses — NOT a fresh cache read: the
-        // memo is non-reactive, so a fresh read could see a sibling's backfill the render hasn't picked up
-        // and skip measuring, leaving THIS view unreserved. When the render isn't reserving yet, hold the
-        // box locally and persist (the report is idempotent, de-duped downstream).
-        if (storedDimensions) return
+        // The browser's measurement is authoritative. Reserve from it and persist whenever the stored
+        // metadata is absent or disagrees (EXIF-rotated, or stale after a content swap), so a wrong value
+        // self-corrects instead of sticking. Compare the memoized `storedDimensions` the render uses, NOT
+        // a fresh cache read — the memo is non-reactive, and this keeps the guard consistent with render.
+        if (
+          storedDimensions &&
+          storedDimensions.width === naturalWidth &&
+          storedDimensions.height === naturalHeight
+        ) {
+          return
+        }
         setMeasuredDimensions({ width: naturalWidth, height: naturalHeight })
         source.reportImageDimensions?.(attrs.src, { width: naturalWidth, height: naturalHeight })
       }}

apps/sim/hooks/queries/workspace-files.ts

@@ -128,11 +128,12 @@ export function useWorkspaceFiles(
 
 /**
  * Back the file content source's image-dimension capability with workspace file metadata. Reads intrinsic
- * dimensions straight from the already-loaded active file list (synchronous, so a stored image reserves
- * its box on the first render), and lazily backfills them once per image on first measurement. The
- * backfill is fire-and-forget and idempotent: the optimistic cache patch makes a second measurement of
- * the same file a no-op locally, and the server ignores an already-populated row — so it never storms,
- * never blocks render, and never touches the collaborative document.
+ * dimensions synchronously from the already-loaded active file list (so a stored image reserves its box on
+ * the first render), and persists the browser's measured dimensions when they're absent or disagree with
+ * what's stored — an overwrite, so a stale value (left over after a content swap, or a non-EXIF-corrected
+ * one) self-corrects rather than sticking. The write is fire-and-forget and de-duped (an exact-match cache
+ * check plus mismatch-only reporting from the caller), so it never storms, never blocks render, and never
+ * touches the collaborative document.
  */
 export function useWorkspaceImageDimensionsAdapter(workspaceId: string): ImageDimensionsSource {
   const queryClient = useQueryClient()
@@ -149,13 +150,15 @@ export function useWorkspaceImageDimensionsAdapter(workspaceId: string): ImageDi
       },
       reportImageDimensions: (src, dimensions) => {
         const record = findRecord(src)
-        // Skip when the file isn't ours to key (external/unlisted) or its dimensions are already stored.
-        if (!record || (record.width != null && record.height != null)) return
-        // Populate the cache so this and sibling views reserve space immediately and a concurrent
-        // measurement of the same file short-circuits above. Kept even if the PATCH fails (a 403 for a
-        // read-only member, or a transient error): the measurement is the real image size, correct
-        // regardless of whether the write landed, so siblings should still reserve from it — a later list
-        // refetch reconciles with the server.
+        // Skip when the file isn't one we can key (external/unlisted), or the cache already holds exactly
+        // these dimensions. We do NOT skip merely because SOME dimensions are stored — they may be stale
+        // (post content-swap / EXIF), and the caller only reports the browser's authoritative measurement
+        // on a real mismatch, so we overwrite to self-correct.
+        if (!record || (record.width === dimensions.width && record.height === dimensions.height))
+          return
+        // Populate the cache so this and sibling views reserve space immediately. Kept even if the PATCH
+        // fails (a 403 for a read-only member, or a transient error): the measurement is the real displayed
+        // size, correct regardless of whether the write landed — a later list refetch reconciles.
         queryClient.setQueryData<WorkspaceFileRecord[]>(listKey, (previous) =>
           previous?.map((entry) => (entry.id === record.id ? { ...entry, ...dimensions } : entry))
         )

apps/sim/lib/uploads/contexts/workspace/workspace-file-manager.ts

@@ -10,7 +10,6 @@ import { createLogger } from '@sim/logger'
 import { getErrorMessage, getPostgresConstraintName, getPostgresErrorCode } from '@sim/utils/errors'
 import { generateShortId } from '@sim/utils/id'
 import { and, eq, isNotNull, isNull, or, sql } from 'drizzle-orm'
-import { imageSize } from 'image-size'
 import type { ShareRecord } from '@/lib/api/contracts/public-shares'
 import {
   decrementStorageUsageForBillingContextInTx,
@@ -863,11 +862,12 @@ async function mapSingleWorkspaceFileRecord(
 }
 
 /**
- * Backfill an image file's intrinsic pixel dimensions (a pure rendering hint used to reserve layout
- * space before the image loads). Idempotent by construction: the `width IS NULL` guard makes it a no-op
- * once populated, so concurrent first-view reporters converge on a single write with no churn. Does NOT
- * touch `updatedAt` — dimensions are not content and must not cache-bust the served image bytes. Returns
- * whether a row was actually written (false when already populated, deleted, or absent).
+ * Store an image file's intrinsic pixel dimensions (a pure rendering hint used to reserve layout space
+ * before the image loads). The client reports the browser's own EXIF-corrected `naturalWidth/Height`, and
+ * only when it differs from what's stored, so this overwrites rather than backfilling once — a stale
+ * value (e.g. left over after the file's content was replaced) self-corrects on the next view instead of
+ * sticking behind a `width IS NULL` guard. Does NOT touch `updatedAt` — dimensions are not content and
+ * must not cache-bust the served image bytes. Returns whether a live row was written.
  */
 export async function updateWorkspaceFileDimensions(
   workspaceId: string,
@@ -881,31 +881,13 @@ export async function updateWorkspaceFileDimensions(
       and(
         eq(workspaceFiles.id, fileId),
         eq(workspaceFiles.workspaceId, workspaceId),
-        isNull(workspaceFiles.deletedAt),
-        isNull(workspaceFiles.width)
+        isNull(workspaceFiles.deletedAt)
       )
     )
     .returning({ id: workspaceFiles.id })
   return updated.length > 0
 }
 
-/**
- * Best-effort intrinsic dimensions of an image buffer (reads headers only, no full decode). Returns null
- * for non-images and unparseable bytes — callers then store null and let the lazy client backfill fill it.
- */
-function measureImageDimensions(
-  content: Buffer,
-  contentType: string
-): { width: number; height: number } | null {
-  if (!contentType.startsWith('image/')) return null
-  try {
-    const { width, height } = imageSize(content)
-    return width && height ? { width, height } : null
-  } catch {
-    return null
-  }
-}
-
 /**
  * Look up a single active workspace file by its original name.
  * Returns the record if found, or null if no matching file exists.
@@ -1252,10 +1234,6 @@ export async function updateWorkspaceFileContent(
   const storageBillingContext = await resolveStorageBillingContext(workspaceId)
   const nextContentType = contentType || fileRecord.type
   const nextStorageKey = generateWorkspaceFileKey(workspaceId, fileRecord.name)
-  // Re-derive intrinsic dimensions from the NEW bytes so the row never carries the previous image's size
-  // — and so a late fire-and-forget backfill PATCH for the OLD image (guarded on `width IS NULL`) can't
-  // resurrect stale dimensions, since these stay non-null for an image.
-  const nextDimensions = measureImageDimensions(content, nextContentType)
 
   try {
     const metadata: Record<string, string> = {
@@ -1334,10 +1312,6 @@ export async function updateWorkspaceFileContent(
             key: uploadResult.key,
             size: content.length,
             contentType: nextContentType,
-            // Replaced content gets its OWN intrinsic dimensions (or null for a non-image), so the editor
-            // never reserves the previous image's aspect ratio and a late stale backfill can't apply.
-            width: nextDimensions?.width ?? null,
-            height: nextDimensions?.height ?? null,
             updatedAt: now,
             contentUpdatedAt,
           })