fix(files): render audio and video stored as application/octet-stream

The file viewer built the blob backing <audio>/<video> from the record's stored
content type with a truthiness fallback, so a stored application/octet-stream
was passed straight through and the element could not determine the format.
Downloading the same file worked because the download path derives its content
type from the filename.

- Add resolveEffectiveMimeType, which resolves a generic stored type against the
  filename, and use it for the media blob, the type column, and the type filter
  (an octet-stream video was also invisible to the Audio/Video/Image filters)
- Map .webm to video/webm rather than audio/webm: a <video> element plays an
  audio-only stream, an <audio> element drops the picture
- Preview .bmp, .avif and .ico, which upload accepts but the viewer sent to the
  download-only path; serve them with their real content type so nosniff does
  not block them. .tiff and .heic stay unsupported - no browser renders them
- Open .jsonl in the text editor, and fill the extension-to-mime gaps for
  .mmd, .diff, .patch and .fish

Author: waleedlatif1

apps/sim/app/api/files/utils.ts

@@ -60,6 +60,9 @@ export const contentTypeMap: Record<string, string> = {
   gif: 'image/gif',
   svg: 'image/svg+xml',
   webp: 'image/webp',
+  avif: 'image/avif',
+  bmp: 'image/bmp',
+  ico: 'image/x-icon',
   zip: 'application/zip',
   googleFolder: 'application/vnd.google-apps.folder',
 }
@@ -159,6 +162,9 @@ const SAFE_INLINE_TYPES = new Set([
   'image/gif',
   'image/svg+xml',
   'image/webp',
+  'image/avif',
+  'image/bmp',
+  'image/x-icon',
   'application/pdf',
   'text/plain',
   'text/csv',

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-category.test.ts

@@ -222,6 +222,29 @@ describe('resolveFileCategory — MIME priority', () => {
   })
 })
 
+describe('resolveFileCategory — formats accepted on upload must be previewable', () => {
+  it.each([
+    ['image.bmp', 'image/bmp'],
+    ['image.avif', 'image/avif'],
+    ['favicon.ico', 'image/x-icon'],
+  ])('%s previews as an image', (filename, mimeType) => {
+    expect(resolveFileCategory(mimeType, filename)).toBe('image-previewable')
+    expect(resolveFileCategory('application/octet-stream', filename)).toBe('image-previewable')
+  })
+
+  it.each(['image.tiff', 'photo.heic'])(
+    '%s stays unsupported — no browser renders it in an <img>',
+    (filename) => {
+      expect(resolveFileCategory(null, filename)).toBe('unsupported')
+    }
+  )
+
+  it('.jsonl opens in the text editor', () => {
+    expect(resolveFileCategory('application/jsonl', 'events.jsonl')).toBe('text-editable')
+    expect(resolveFileCategory('application/octet-stream', 'events.jsonl')).toBe('text-editable')
+  })
+})
+
 describe('resolveFileCategory — extension case', () => {
   it('recognises uppercase extension via extension lookup (getFileExtension lowercases)', () => {
     expect(resolveFileCategory(null, 'README.MD')).toBe('text-editable')

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-category.ts

@@ -5,6 +5,7 @@ const TEXT_EDITABLE_MIME_TYPES = new Set([
   'text/markdown',
   'text/plain',
   'application/json',
+  'application/jsonl',
   'application/x-yaml',
   'text/csv',
   'text/html',
@@ -26,6 +27,7 @@ const TEXT_EDITABLE_EXTENSIONS = new Set([
   'md',
   'txt',
   'json',
+  'jsonl',
   'yaml',
   'yml',
   'csv',
@@ -43,8 +45,32 @@ const IFRAME_PREVIEWABLE_MIME_TYPES = new Set([
 ])
 const IFRAME_PREVIEWABLE_EXTENSIONS = new Set(['pdf'])
 
-const IMAGE_PREVIEWABLE_MIME_TYPES = new Set(['image/png', 'image/jpeg', 'image/gif', 'image/webp'])
-const IMAGE_PREVIEWABLE_EXTENSIONS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp'])
+/**
+ * Image formats every supported browser decodes natively. `.tif`/`.tiff` and
+ * `.heic`/`.heif` are accepted uploads but deliberately absent — no browser renders
+ * them in an `<img>`, so they stay on the download-only path rather than showing a
+ * broken image.
+ */
+const IMAGE_PREVIEWABLE_MIME_TYPES = new Set([
+  'image/png',
+  'image/jpeg',
+  'image/gif',
+  'image/webp',
+  'image/avif',
+  'image/bmp',
+  'image/x-icon',
+  'image/vnd.microsoft.icon',
+])
+const IMAGE_PREVIEWABLE_EXTENSIONS = new Set([
+  'png',
+  'jpg',
+  'jpeg',
+  'gif',
+  'webp',
+  'avif',
+  'bmp',
+  'ico',
+])
 
 const AUDIO_PREVIEWABLE_MIME_TYPES = new Set([
   'audio/mpeg',

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

@@ -4,7 +4,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Music } from '@sim/emcn/icons'
 import dynamic from 'next/dynamic'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
-import { getFileExtension } from '@/lib/uploads/utils/file-utils'
+import { getFileExtension, resolveEffectiveMimeType } from '@/lib/uploads/utils/file-utils'
 import {
   useWorkspaceFileBinary,
   useWorkspaceFileContent,
@@ -363,6 +363,28 @@ function useBlobUrl(workspaceId: string, fileId: string, fileKey: string) {
 
 const MEDIA_FALLBACK_MIME = { audio: 'audio/mpeg', video: 'video/mp4' } as const
 
+/**
+ * The `type` for the blob backing an `<audio>`/`<video>` element. That type is the only
+ * format signal the element gets, so it has to be resolved against the filename rather
+ * than read off the record: storage legitimately holds `application/octet-stream` (the
+ * browser reports it for plenty of media formats, and the presigned PUT handshake
+ * requires persisting it verbatim), and an element handed that type cannot determine the
+ * format and renders nothing — which is why the same file downloads perfectly.
+ *
+ * Anything that does not resolve to a playable media type falls back to the kind's
+ * default rather than being passed through, so a stale or mismatched stored type can
+ * never leave the element with a type it cannot play.
+ */
+function resolveMediaBlobType(
+  storedType: string | null,
+  filename: string,
+  kind: 'audio' | 'video'
+): string {
+  const resolved = resolveEffectiveMimeType(storedType, filename)
+  if (resolved?.startsWith('audio/') || resolved?.startsWith('video/')) return resolved
+  return MEDIA_FALLBACK_MIME[kind]
+}
+
 /**
  * Shared blob-backed preview for audio and video files — the fetch, blob-URL
  * lifecycle, and error/loading handling are identical; only the rendered
@@ -385,12 +407,12 @@ const MediaPreview = memo(function MediaPreview({
     replaceBlobUrl,
   } = useBlobUrl(workspaceId, file.id, file.key)
 
+  const mediaType = resolveMediaBlobType(file.type, file.name, kind)
+
   useEffect(() => {
     if (!fileData) return
-    replaceBlobUrl(
-      URL.createObjectURL(new Blob([fileData], { type: file.type || MEDIA_FALLBACK_MIME[kind] }))
-    )
-  }, [file.type, fileData, kind, replaceBlobUrl])
+    replaceBlobUrl(URL.createObjectURL(new Blob([fileData], { type: mediaType })))
+  }, [fileData, mediaType, replaceBlobUrl])
 
   const error = blobUrl !== null ? null : resolvePreviewError(fetchError, null)
   if (error) return <PreviewError label={kind} error={error} />

apps/sim/app/workspace/[workspaceId]/files/files.tsx

@@ -36,6 +36,7 @@ import {
   getMimeTypeFromExtension,
   isAudioFileType,
   isVideoFileType,
+  resolveEffectiveMimeType,
 } from '@/lib/uploads/utils/file-utils'
 import {
   isSupportedExtension,
@@ -195,7 +196,11 @@ const parseRowId = (rowId: string): { kind: 'file' | 'folder'; id: string } => {
 const hasExternalFiles = (dataTransfer: DataTransfer): boolean =>
   dataTransfer.types.includes('Files')
 
-function formatFileType(mimeType: string | null, filename: string): string {
+function formatFileType(storedType: string | null, filename: string): string {
+  // A stored `application/octet-stream` labels nothing and matches no filter, so the
+  // effective type is resolved from the filename first — see resolveEffectiveMimeType.
+  const mimeType = resolveEffectiveMimeType(storedType, filename)
+
   if (mimeType && MIME_TYPE_LABELS[mimeType]) {
     return MIME_TYPE_LABELS[mimeType]
   }
@@ -493,10 +498,13 @@ export function Files() {
     if (typeFilter.length > 0) {
       result = result.filter((f) => {
         const ext = getFileExtension(f.name)
+        // Matching on the raw stored type would hide every file the browser uploaded as
+        // `application/octet-stream` from the audio/video/image filters.
+        const type = resolveEffectiveMimeType(f.type, f.name) ?? ''
         if (typeFilter.includes('document') && isSupportedExtension(ext)) return true
-        if (typeFilter.includes('audio') && isAudioFileType(f.type)) return true
-        if (typeFilter.includes('video') && isVideoFileType(f.type)) return true
-        if (typeFilter.includes('image') && f.type?.startsWith('image/')) return true
+        if (typeFilter.includes('audio') && isAudioFileType(type)) return true
+        if (typeFilter.includes('video') && isVideoFileType(type)) return true
+        if (typeFilter.includes('image') && type.startsWith('image/')) return true
         return false
       })
     }

apps/sim/lib/uploads/utils/file-utils.test.ts

@@ -11,6 +11,7 @@ import {
   isMarkdownFile,
   isNetworkError,
   processSingleFileToUserFile,
+  resolveEffectiveMimeType,
   resolveTrustedFileContext,
 } from '@/lib/uploads/utils/file-utils'
 
@@ -193,3 +194,48 @@ describe('processSingleFileToUserFile', () => {
     expect(result.key).toBe('workspace/ws-1/doc.pdf')
   })
 })
+
+describe('resolveEffectiveMimeType', () => {
+  it('keeps a specific stored type', () => {
+    expect(resolveEffectiveMimeType('video/quicktime', 'clip.mp4')).toBe('video/quicktime')
+    expect(resolveEffectiveMimeType('text/markdown', 'notes.md')).toBe('text/markdown')
+  })
+
+  it.each([
+    ['clip.mp4', 'video/mp4'],
+    ['clip.mov', 'video/quicktime'],
+    ['clip.mkv', 'video/x-matroska'],
+    ['song.mp3', 'audio/mpeg'],
+    ['song.flac', 'audio/flac'],
+    ['icon.ico', 'image/x-icon'],
+    ['shot.avif', 'image/avif'],
+  ])('resolves a stored application/octet-stream for %s from the extension', (name, expected) => {
+    expect(resolveEffectiveMimeType('application/octet-stream', name)).toBe(expected)
+  })
+
+  it('resolves binary/octet-stream and blank stored types too', () => {
+    expect(resolveEffectiveMimeType('binary/octet-stream', 'clip.mp4')).toBe('video/mp4')
+    expect(resolveEffectiveMimeType('  ', 'clip.mp4')).toBe('video/mp4')
+    expect(resolveEffectiveMimeType(null, 'clip.mp4')).toBe('video/mp4')
+    expect(resolveEffectiveMimeType(undefined, 'clip.mp4')).toBe('video/mp4')
+  })
+
+  it('resolves .webm to the video type so the picture is not dropped', () => {
+    expect(resolveEffectiveMimeType('application/octet-stream', 'clip.webm')).toBe('video/webm')
+  })
+
+  it('keeps an explicit audio/webm from the browser', () => {
+    expect(resolveEffectiveMimeType('audio/webm', 'recording.webm')).toBe('audio/webm')
+  })
+
+  it('returns the generic type when the extension identifies nothing either', () => {
+    expect(resolveEffectiveMimeType('application/octet-stream', 'firmware.bin')).toBe(
+      'application/octet-stream'
+    )
+  })
+
+  it('returns null when there is neither a stored type nor a known extension', () => {
+    expect(resolveEffectiveMimeType(null, 'firmware.bin')).toBeNull()
+    expect(resolveEffectiveMimeType('', 'noextension')).toBeNull()
+  })
+})

apps/sim/lib/uploads/utils/file-utils.ts

@@ -312,6 +312,7 @@ const EXTENSION_TO_MIME: Record<string, string> = {
   xls: 'application/vnd.ms-excel',
   ppt: 'application/vnd.ms-powerpoint',
   md: 'text/markdown',
+  jsonl: 'application/jsonl',
   yaml: 'application/x-yaml',
   yml: 'application/x-yaml',
   rtf: 'application/rtf',
@@ -362,12 +363,15 @@ const EXTENSION_TO_MIME: Record<string, string> = {
   graphql: 'text/x-graphql',
   gql: 'text/x-graphql',
   proto: 'text/x-protobuf',
+  mmd: 'text/x-mermaid',
+  diff: 'text/x-diff',
+  patch: 'text/x-diff',
+  fish: 'text/x-shellscript',
 
   // Audio
   mp3: 'audio/mpeg',
   m4a: 'audio/mp4',
   wav: 'audio/wav',
-  webm: 'audio/webm',
   ogg: 'audio/ogg',
   flac: 'audio/flac',
   aac: 'audio/aac',
@@ -378,8 +382,20 @@ const EXTENSION_TO_MIME: Record<string, string> = {
   mov: 'video/quicktime',
   avi: 'video/x-msvideo',
   mkv: 'video/x-matroska',
+  // `.webm` is both an audio and a video container; the video type is the safe
+  // resolution because a `<video>` element plays an audio-only stream, while an
+  // `<audio>` element handed a video stream drops the picture.
+  webm: 'video/webm',
 }
 
+/**
+ * MIME types that carry no format information. Storage keeps whatever the browser
+ * reported at upload time, and the direct-PUT path preserves it verbatim (see
+ * {@link getFileContentType}), so a stored type may be one of these even when the
+ * filename identifies the format precisely.
+ */
+const GENERIC_MIME_TYPES = new Set(['application/octet-stream', 'binary/octet-stream'])
+
 /**
  * Get MIME type from file extension (fallback if not provided)
  */
@@ -416,6 +432,32 @@ export function getFileContentType(file: File): string {
   return resolveFileType(file, { preserveOctetStream: true })
 }
 
+/**
+ * The MIME type to render a *stored* file as, resolving the generic types that storage
+ * legitimately holds against the filename.
+ *
+ * A stored `application/octet-stream` is not an error — browsers report it for plenty of
+ * real formats, and the presigned PUT handshake requires persisting it verbatim. Any
+ * consumer that feeds a stored type to a `Blob`, a media element, or a type filter must
+ * go through this rather than trusting `file.type` directly: a truthiness check
+ * (`file.type || fallback`) passes `application/octet-stream` straight through, and a
+ * media element handed that blob cannot determine the format and renders nothing.
+ *
+ * Returns `null` only when neither the stored type nor the extension identifies the file.
+ */
+export function resolveEffectiveMimeType(
+  storedType: string | null | undefined,
+  filename: string
+): string | null {
+  const stored = storedType?.trim()
+  if (stored && !GENERIC_MIME_TYPES.has(stored)) return stored
+
+  const fromExtension = getMimeTypeFromExtension(getFileExtension(filename))
+  if (!GENERIC_MIME_TYPES.has(fromExtension)) return fromExtension
+
+  return stored || null
+}
+
 /**
  * Whether `error` is a DOM `AbortError` (XHR `abort()`, fetch `signal.aborted`,
  * etc). Used in upload retry loops so aborts short-circuit instead of retrying.