diff --git a/apps/sim/app/workspace/[workspaceId]/files/files.tsx b/apps/sim/app/workspace/[workspaceId]/files/files.tsx index b172d8bc5d..e259a7dad2 100644 --- a/apps/sim/app/workspace/[workspaceId]/files/files.tsx +++ b/apps/sim/app/workspace/[workspaceId]/files/files.tsx @@ -43,6 +43,7 @@ import { SUPPORTED_AUDIO_EXTENSIONS, SUPPORTED_CODE_EXTENSIONS, SUPPORTED_DOCUMENT_EXTENSIONS, + SUPPORTED_IMAGE_EXTENSIONS, SUPPORTED_VIDEO_EXTENSIONS, } from '@/lib/uploads/utils/validation' import type { @@ -89,6 +90,7 @@ const SUPPORTED_EXTENSIONS = [ ...SUPPORTED_CODE_EXTENSIONS, ...SUPPORTED_AUDIO_EXTENSIONS, ...SUPPORTED_VIDEO_EXTENSIONS, + ...SUPPORTED_IMAGE_EXTENSIONS, ] as const const ACCEPT_ATTR = SUPPORTED_EXTENSIONS.map((ext) => `.${ext}`).join(',') @@ -125,6 +127,7 @@ function formatFileType(mimeType: string | null, filename: string): string { if (mimeType?.startsWith('audio/')) return 'Audio' if (mimeType?.startsWith('video/')) return 'Video' + if (mimeType?.startsWith('image/')) return 'Image' const ext = getFileExtension(filename) if (ext) return ext.toUpperCase() @@ -246,6 +249,7 @@ export function Files() { 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 return false }) } @@ -926,9 +930,14 @@ export function Files() { typeFilter.length === 0 ? 'All' : typeFilter.length === 1 - ? (({ document: 'Documents', audio: 'Audio', video: 'Video' } as Record)[ - typeFilter[0] - ] ?? typeFilter[0]) + ? (( + { + document: 'Documents', + image: 'Images', + audio: 'Audio', + video: 'Video', + } as Record + )[typeFilter[0]] ?? typeFilter[0]) : `${typeFilter.length} selected` const sizeDisplayLabel = @@ -954,6 +963,7 @@ export function Files() { 0) { const typeLabels: Record = { document: 'Documents', + image: 'Images', audio: 'Audio', video: 'Video', } diff --git a/apps/sim/lib/uploads/utils/validation.ts b/apps/sim/lib/uploads/utils/validation.ts index f4e4558679..af0a5581fb 100644 --- a/apps/sim/lib/uploads/utils/validation.ts +++ b/apps/sim/lib/uploads/utils/validation.ts @@ -95,13 +95,31 @@ export const SUPPORTED_AUDIO_EXTENSIONS = [ export const SUPPORTED_VIDEO_EXTENSIONS = ['mp4', 'mov', 'avi', 'mkv', 'webm'] as const +export const SUPPORTED_IMAGE_EXTENSIONS = [ + 'png', + 'jpg', + 'jpeg', + 'gif', + 'webp', + 'svg', + 'bmp', + 'tif', + 'tiff', + 'heic', + 'heif', + 'avif', + 'ico', +] as const + export type SupportedDocumentExtension = (typeof SUPPORTED_DOCUMENT_EXTENSIONS)[number] export type SupportedAudioExtension = (typeof SUPPORTED_AUDIO_EXTENSIONS)[number] export type SupportedVideoExtension = (typeof SUPPORTED_VIDEO_EXTENSIONS)[number] +export type SupportedImageExtension = (typeof SUPPORTED_IMAGE_EXTENSIONS)[number] export type SupportedMediaExtension = | SupportedDocumentExtension | SupportedAudioExtension | SupportedVideoExtension + | SupportedImageExtension export const SUPPORTED_MIME_TYPES: Record = { pdf: ['application/pdf', 'application/x-pdf'], @@ -180,14 +198,19 @@ const SUPPORTED_IMAGE_MIME_TYPES = [ 'image/gif', 'image/webp', 'image/svg+xml', + 'image/bmp', + 'image/tiff', + 'image/heic', + 'image/heif', + 'image/avif', + 'image/x-icon', + 'image/vnd.microsoft.icon', ] -const SUPPORTED_IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg'] - export const CHAT_ACCEPT_ATTRIBUTE = [ ACCEPT_ATTRIBUTE, ...SUPPORTED_IMAGE_MIME_TYPES, - ...SUPPORTED_IMAGE_EXTENSIONS, + ...SUPPORTED_IMAGE_EXTENSIONS.map((ext) => `.${ext}`), ].join(',') export interface FileValidationError {