fix(files): render image previews inline

Author: waleedlatif1

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

@@ -5,6 +5,10 @@ import { act } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
+import {
+  createWorkspaceFileContentSource,
+  FileContentSourceProvider,
+} from '@/hooks/use-file-content-source'
 import { ImagePreview } from './image-preview'
 
 const file = {
@@ -43,7 +47,13 @@ afterEach(() => {
 })
 
 function render(record: WorkspaceFileRecord = file) {
-  act(() => root.render(<ImagePreview file={record} />))
+  act(() =>
+    root.render(
+      <FileContentSourceProvider value={createWorkspaceFileContentSource(record.workspaceId)}>
+        <ImagePreview file={record} />
+      </FileContentSourceProvider>
+    )
+  )
 }
 
 describe('ImagePreview', () => {
@@ -55,6 +65,13 @@ describe('ImagePreview', () => {
     expect(src).not.toContain('raw=1')
   })
 
+  it('streams browser-renderable images through the workspace inline endpoint', () => {
+    render({ ...file, name: 'photo.png', key: 'workspace/ws-1/photo.png', type: 'image/png' })
+
+    const src = container.querySelector('img')?.getAttribute('src') ?? ''
+    expect(src).toBe('/api/workspaces/ws-1/files/inline?key=workspace%2Fws-1%2Fphoto.png')
+  })
+
   it('falls back to the unsupported state when the image fails to decode', () => {
     render()
 

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

@@ -8,9 +8,9 @@ import { ZoomablePreview } from './zoomable-preview'
 
 export const ImagePreview = memo(function ImagePreview({ file }: { file: WorkspaceFileRecord }) {
   const source = useFileContentSource()
-  /** `v` busts the browser cache across content writes; `preview` lets the server
-   *  substitute a renderable JPEG for a HEIC. */
-  const serveUrl = source.buildUrl(file.key, {
+  /** Workspace images use their content-addressed inline URL. Derivative-backed
+   *  sources use the version and preview flag to render formats such as HEIC. */
+  const serveUrl = source.buildImageUrl(file, {
     version: Number(new Date(file.updatedAt)) || file.size,
     preview: true,
   })

apps/sim/hooks/use-file-content-source.tsx

@@ -56,6 +56,10 @@ export interface ImageDimensionsSource {
  */
 export interface FileContentSource {
   buildUrl: (key: string, opts?: FileContentUrlOptions) => string
+  buildImageUrl: (
+    file: { key: string; name: string; type: string },
+    opts?: FileContentUrlOptions
+  ) => string
   /**
    * Map an embedded image `src` to a display URL scoped to the current context: the in-app source
    * points at the workspace-scoped inline route, the public source at the token-scoped cascade route.
@@ -81,7 +85,7 @@ function buildServeUrl(key: string, opts?: FileContentUrlOptions): string {
 function inlineImageSource(
   buildUrl: FileContentSource['buildUrl'],
   inlineBase: string
-): FileContentSource {
+): Pick<FileContentSource, 'buildUrl' | 'resolveImageSrc'> {
   return {
     buildUrl,
     resolveImageSrc: (src) => {
@@ -103,6 +107,16 @@ export function createWorkspaceFileContentSource(
 ): FileContentSource {
   return {
     ...inlineImageSource(buildServeUrl, `/api/workspaces/${workspaceId}/files/inline`),
+    buildImageUrl: (file, opts) => {
+      const heic =
+        file.type === 'image/heic' ||
+        file.type === 'image/heif' ||
+        /\.(?:heic|heif)$/i.test(file.name)
+      if (heic) return buildServeUrl(file.key, { ...opts, preview: true })
+
+      const params = new URLSearchParams({ key: file.key })
+      return `/api/workspaces/${encodeURIComponent(workspaceId)}/files/inline?${params}`
+    },
     ...imageDimensions,
   }
 }
@@ -116,11 +130,17 @@ export function createPublicFileContentSource(
   token: string,
   contentUrl: string
 ): FileContentSource {
-  return inlineImageSource(
-    (_key, opts) =>
+  return {
+    ...inlineImageSource(
+      (_key, opts) =>
+        opts?.preview
+          ? `${contentUrl}${contentUrl.includes('?') ? '&' : '?'}preview=1`
+          : contentUrl,
+      `/api/files/public/${token}/inline`
+    ),
+    buildImageUrl: (_file, opts) =>
       opts?.preview ? `${contentUrl}${contentUrl.includes('?') ? '&' : '?'}preview=1` : contentUrl,
-    `/api/files/public/${token}/inline`
-  )
+  }
 }
 
 /**
@@ -130,6 +150,7 @@ export function createPublicFileContentSource(
  */
 export const workspaceFileContentSource: FileContentSource = {
   buildUrl: buildServeUrl,
+  buildImageUrl: (file, opts) => buildServeUrl(file.key, { ...opts, preview: true }),
   resolveImageSrc: (src) => src,
 }