fix(files): reset the image preview when the file is overwritten

An overwrite preserves the storage key, which is what the parent keys this
component on, so only the URL version changes and it never remounts. The
previous bytes' outcome therefore stuck, leaving a replaced image parked on
'Preview not available' until something else forced a remount.

Reset on URL change during render rather than in an effect — this is derived
state, and an effect would render the stale outcome first.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/image-preview.test.tsx

@@ -42,8 +42,8 @@ afterEach(() => {
   container.remove()
 })
 
-function render() {
-  act(() => root.render(<ImagePreview file={file} />))
+function render(record: WorkspaceFileRecord = file) {
+  act(() => root.render(<ImagePreview file={record} />))
 }
 
 describe('ImagePreview', () => {
@@ -68,4 +68,20 @@ describe('ImagePreview', () => {
     expect(container.querySelector('img')).toBeNull()
     expect(container.textContent).toContain('Preview not available')
   })
+
+  it('retries when the file is overwritten, which keeps the same storage key', () => {
+    render()
+
+    act(() => {
+      container.querySelector('img')?.dispatchEvent(new Event('error'))
+    })
+    expect(container.textContent).toContain('Preview not available')
+
+    // An overwrite preserves `file.key` — the parent's key — so only the version
+    // changes and the component never remounts.
+    render({ ...file, updatedAt: new Date('2026-02-01T00:00:00Z') })
+
+    expect(container.querySelector('img')).not.toBeNull()
+    expect(container.textContent).not.toContain('Preview not available')
+  })
 })

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

@@ -8,7 +8,6 @@ import { ZoomablePreview } from './zoomable-preview'
 
 export const ImagePreview = memo(function ImagePreview({ file }: { file: WorkspaceFileRecord }) {
   const source = useFileContentSource()
-  const [status, setStatus] = useState<'loading' | 'loaded' | 'error'>('loading')
   // Version the URL on updatedAt: overwrites keep the same storage key, so an unversioned
   // URL would resolve to a previously cached copy instead of the rewritten bytes.
   // `preview` lets the server substitute a renderable derivative for a HEIC.
@@ -17,6 +16,17 @@ export const ImagePreview = memo(function ImagePreview({ file }: { file: Workspa
     preview: true,
   })
 
+  const [status, setStatus] = useState<'loading' | 'loaded' | 'error'>('loading')
+  const [loadedUrl, setLoadedUrl] = useState(serveUrl)
+
+  // The parent keys this on `file.key`, which an overwrite preserves — only the
+  // version changes. Without this the outcome of the previous bytes would stick,
+  // leaving a replaced image permanently on the unsupported state.
+  if (loadedUrl !== serveUrl) {
+    setLoadedUrl(serveUrl)
+    setStatus('loading')
+  }
+
   // Covers every way the bytes can turn out unrenderable — a derivative the server
   // declined to build (too large, undecodable) and a corrupt or truncated image
   // alike — rather than leaving a broken image in the viewer.