fix(files): read pasted images from clipboard items, not just files

Some browsers expose a pasted or copied image only via DataTransfer.items (with an empty files list), so screenshot paste was silently ignored. extractImageFiles now falls back to items; moved to a testable module with unit tests (addresses Cursor Bugbot).

Author: waleedlatif1

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

@@ -0,0 +1,56 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, expect, it } from 'vitest'
+import { extractImageFiles } from './image-paste'
+
+function imageFile(name = 'shot.png'): File {
+  return new File([''], name, { type: 'image/png' })
+}
+
+function transfer(
+  files: File[],
+  items: Array<{ kind: string; type: string; file: File | null }> = []
+): DataTransfer {
+  return {
+    files,
+    items: items.map((entry) => ({
+      kind: entry.kind,
+      type: entry.type,
+      getAsFile: () => entry.file,
+    })),
+  } as unknown as DataTransfer
+}
+
+describe('extractImageFiles', () => {
+  it('returns nothing for a null payload or non-image files', () => {
+    expect(extractImageFiles(null)).toEqual([])
+    expect(extractImageFiles(transfer([new File([''], 'a.txt', { type: 'text/plain' })]))).toEqual(
+      []
+    )
+  })
+
+  it('reads images from the files list (drag-drop)', () => {
+    const file = imageFile()
+    expect(extractImageFiles(transfer([file]))).toEqual([file])
+  })
+
+  it('falls back to items when files is empty (pasted screenshot)', () => {
+    const file = imageFile()
+    const result = extractImageFiles(transfer([], [{ kind: 'file', type: 'image/png', file }]))
+    expect(result).toEqual([file])
+  })
+
+  it('ignores non-file and non-image items', () => {
+    const result = extractImageFiles(
+      transfer(
+        [],
+        [
+          { kind: 'string', type: 'text/plain', file: null },
+          { kind: 'file', type: 'application/pdf', file: new File([''], 'a.pdf') },
+        ]
+      )
+    )
+    expect(result).toEqual([])
+  })
+})

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

@@ -0,0 +1,14 @@
+/**
+ * Extract image `File` objects from a paste/drop payload. Reads `files` first, then falls back to
+ * `items` — many browsers expose a pasted or copied image (e.g. a screenshot) only through
+ * `DataTransfer.items` with an empty `files` list, so reading `files` alone misses them.
+ */
+export function extractImageFiles(transfer: DataTransfer | null): File[] {
+  if (!transfer) return []
+  const fromFiles = Array.from(transfer.files).filter((file) => file.type.startsWith('image/'))
+  if (fromFiles.length > 0) return fromFiles
+  return Array.from(transfer.items)
+    .filter((item) => item.kind === 'file' && item.type.startsWith('image/'))
+    .map((item) => item.getAsFile())
+    .filter((file): file is File => file !== null)
+}

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

@@ -9,6 +9,7 @@ import type { SaveStatus } from '@/hooks/use-autosave'
 import { PreviewLoadingFrame } from '../preview-shared'
 import { useEditableFileContent } from '../use-editable-file-content'
 import { createMarkdownEditorExtensions } from './extensions'
+import { extractImageFiles } from './image-paste'
 import {
   applyFrontmatter,
   normalizeLinkHref,
@@ -23,12 +24,6 @@ const EXTENSIONS = createMarkdownEditorExtensions({
   placeholder: "Write something, or press '/' for commands…",
 })
 
-/** Image files from a paste/drop payload (screenshots, dragged files, copied images). */
-function extractImageFiles(transfer: DataTransfer | null): File[] {
-  if (!transfer) return []
-  return Array.from(transfer.files).filter((file) => file.type.startsWith('image/'))
-}
-
 interface RichMarkdownEditorProps {
   file: WorkspaceFileRecord
   workspaceId: string