fix(files): align upload route image extensions with picker

apps/sim/app/api/files/upload/route.ts

@@ -18,6 +18,7 @@ import {
   SUPPORTED_AUDIO_EXTENSIONS,
   SUPPORTED_CODE_EXTENSIONS,
   SUPPORTED_DOCUMENT_EXTENSIONS,
+  SUPPORTED_IMAGE_EXTENSIONS,
   SUPPORTED_VIDEO_EXTENSIONS,
   validateFileType,
 } from '@/lib/uploads/utils/validation'
@@ -28,12 +29,10 @@ import {
   InvalidRequestError,
 } from '@/app/api/files/utils'
 
-const IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'] as const
-
 const ALLOWED_EXTENSIONS = new Set<string>([
   ...SUPPORTED_DOCUMENT_EXTENSIONS,
   ...SUPPORTED_CODE_EXTENSIONS,
-  ...IMAGE_EXTENSIONS,
+  ...SUPPORTED_IMAGE_EXTENSIONS,
   ...SUPPORTED_AUDIO_EXTENSIONS,
   ...SUPPORTED_VIDEO_EXTENSIONS,
 ])
@@ -305,10 +304,17 @@ export const POST = withRouteHandler(async (request: NextRequest) => {
         context === 'profile-pictures' ||
         context === 'workspace-logos'
       ) {
-        if (context !== 'copilot' && !isImageFileType(file.type)) {
-          throw new InvalidRequestError(
-            `Only image files (JPEG, PNG, GIF, WebP, SVG) are allowed for ${context} uploads`
+        if (context !== 'copilot') {
+          const mimeType = file.type
+          const isGenericMime = !mimeType || mimeType === 'application/octet-stream'
+          const extension = originalName.split('.').pop()?.toLowerCase() ?? ''
+          const extensionIsImage = (SUPPORTED_IMAGE_EXTENSIONS as readonly string[]).includes(
+            extension
           )
+          const isImage = isGenericMime ? extensionIsImage : isImageFileType(mimeType)
+          if (!isImage) {
+            throw new InvalidRequestError(`Only image files are allowed for ${context} uploads`)
+          }
         }
 
         if (context === 'workspace-logos') {

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

@@ -33,6 +33,13 @@ export const MIME_TYPE_MAPPING: Record<string, 'image' | 'document' | 'audio' |
   'image/gif': 'image',
   'image/webp': 'image',
   'image/svg+xml': 'image', // SVG upload is allowed; createFileContent handles it separately for Claude API
+  'image/bmp': 'image',
+  'image/tiff': 'image',
+  'image/heic': 'image',
+  'image/heif': 'image',
+  'image/avif': 'image',
+  'image/x-icon': 'image',
+  'image/vnd.microsoft.icon': 'image',
 
   // Documents
   'application/pdf': 'document',
@@ -158,6 +165,10 @@ export function createFileContent(fileBuffer: Buffer, mimeType: string): Message
     return null
   }
 
+  if (contentType === 'image' && !CLAUDE_SUPPORTED_IMAGE_MIME_TYPES.has(mimeType.toLowerCase())) {
+    return null
+  }
+
   return {
     type: contentType,
     source: {
@@ -168,6 +179,13 @@ export function createFileContent(fileBuffer: Buffer, mimeType: string): Message
   }
 }
 
+const CLAUDE_SUPPORTED_IMAGE_MIME_TYPES = new Set([
+  'image/jpeg',
+  'image/png',
+  'image/gif',
+  'image/webp',
+])
+
 /**
  * Extract file extension from filename
  */
@@ -184,6 +202,13 @@ const EXTENSION_TO_MIME: Record<string, string> = {
   gif: 'image/gif',
   webp: 'image/webp',
   svg: 'image/svg+xml',
+  bmp: 'image/bmp',
+  tif: 'image/tiff',
+  tiff: 'image/tiff',
+  heic: 'image/heic',
+  heif: 'image/heif',
+  avif: 'image/avif',
+  ico: 'image/x-icon',
 
   // Documents
   pdf: 'application/pdf',