fix(uploads): skip per-file invalidation in batch + extract shared API fallback

- Add skipInvalidation flag to useUploadWorkspaceFile; file-upload sub-block now invalidates once after the batch instead of per file
- Extract uploadViaApiFallback to lib/uploads/client/api-fallback.ts (DRY across 3 hooks)

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/hooks/use-profile-picture-upload.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
+import { uploadViaApiFallback } from '@/lib/uploads/client/api-fallback'
 import { DirectUploadError, runUploadStrategy } from '@/lib/uploads/client/direct-upload'
-import type { StorageContext } from '@/lib/uploads/shared/types'
 
 const logger = createLogger('ProfilePictureUpload')
 const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5MB
@@ -15,45 +15,6 @@ interface UseProfilePictureUploadProps {
   workspaceId?: string
 }
 
-/**
- * Server-proxied fallback used only when cloud storage isn't configured (local dev).
- * Production always takes the presigned PUT path.
- */
-async function uploadViaApiFallback(
-  file: File,
-  context: StorageContext,
-  workspaceId?: string
-): Promise<string> {
-  const formData = new FormData()
-  formData.append('file', file)
-  formData.append('context', context)
-  if (workspaceId) {
-    formData.append('workspaceId', workspaceId)
-  }
-
-  // boundary-raw-fetch: local-dev fallback when cloud storage is not configured; multipart upload incompatible with requestJson
-  const response = await fetch('/api/files/upload', { method: 'POST', body: formData })
-  if (!response.ok) {
-    const errorData = (await response.json().catch(() => ({}))) as {
-      message?: string
-      error?: string
-    }
-    throw new Error(
-      errorData.message || errorData.error || `Failed to upload file: ${response.status}`
-    )
-  }
-  const data = (await response.json()) as {
-    fileInfo?: { path?: string }
-    path?: string
-    url?: string
-  }
-  const publicUrl = data.fileInfo?.path ?? data.path ?? data.url
-  if (!publicUrl) {
-    throw new Error('Invalid upload response: missing path')
-  }
-  return publicUrl
-}
-
 /**
  * Hook for handling profile picture upload functionality.
  * Manages file validation, preview generation, and server upload.
@@ -120,9 +81,9 @@ export function useProfilePictureUpload({
         return result.path
       } catch (error) {
         if (error instanceof DirectUploadError && error.code === 'FALLBACK_REQUIRED') {
-          const publicUrl = await uploadViaApiFallback(file, context, workspaceId)
-          logger.info(`${context} uploaded successfully via API fallback: ${publicUrl}`)
-          return publicUrl
+          const { path } = await uploadViaApiFallback(file, context, workspaceId)
+          logger.info(`${context} uploaded successfully via API fallback: ${path}`)
+          return path
         }
         throw error
       }

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-file-attachments.ts

@@ -5,6 +5,7 @@ import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
 import { toast } from '@/components/emcn'
+import { uploadViaApiFallback } from '@/lib/uploads/client/api-fallback'
 import { DirectUploadError, runUploadStrategy } from '@/lib/uploads/client/direct-upload'
 import { resolveFileType } from '@/lib/uploads/utils/file-utils'
 
@@ -52,44 +53,6 @@ interface UseFileAttachmentsProps {
   isLoading?: boolean
 }
 
-/**
- * Server-proxied fallback used only when cloud storage isn't configured (local dev).
- * Production always takes the presigned PUT path.
- */
-async function uploadViaApiFallback(
-  file: File,
-  workspaceId: string
-): Promise<{ path: string; key: string }> {
-  const formData = new FormData()
-  formData.append('file', file)
-  formData.append('context', 'mothership')
-  formData.append('workspaceId', workspaceId)
-
-  // boundary-raw-fetch: local-dev fallback when cloud storage is not configured; multipart upload incompatible with requestJson
-  const response = await fetch('/api/files/upload', { method: 'POST', body: formData })
-  if (!response.ok) {
-    const errorData = (await response.json().catch(() => ({}))) as {
-      message?: string
-      error?: string
-    }
-    throw new Error(
-      errorData.message || errorData.error || `Failed to upload file: ${response.status}`
-    )
-  }
-  const data = (await response.json()) as {
-    fileInfo?: { path?: string; key?: string }
-    path?: string
-    key?: string
-    url?: string
-  }
-  const path = data.fileInfo?.path ?? data.path ?? data.url
-  const key = data.fileInfo?.key ?? data.key
-  if (!path || !key) {
-    throw new Error('Invalid upload response: missing path or key')
-  }
-  return { path, key }
-}
-
 /**
  * Custom hook to manage file attachments including upload, drag/drop, and preview
  * Handles S3 presigned URL uploads and preview URL generation
@@ -193,7 +156,11 @@ export function useFileAttachments(props: UseFileAttachmentsProps) {
               })
             } catch (error) {
               if (error instanceof DirectUploadError && error.code === 'FALLBACK_REQUIRED') {
-                result = await uploadViaApiFallback(file, workspaceId)
+                const fallback = await uploadViaApiFallback(file, 'mothership', workspaceId)
+                if (!fallback.key) {
+                  throw new Error('Invalid upload response: missing key')
+                }
+                result = { path: fallback.path, key: fallback.key }
               } else {
                 throw error
               }

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx

@@ -2,6 +2,7 @@
 
 import { useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
+import { useQueryClient } from '@tanstack/react-query'
 import { X } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { Button, Combobox } from '@/components/emcn/components'
@@ -12,7 +13,11 @@ import { fileDeleteContract } from '@/lib/api/contracts/storage-transfer'
 import { cn } from '@/lib/core/utils/cn'
 import { getExtensionFromMimeType } from '@/lib/uploads/utils/file-utils'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
-import { useUploadWorkspaceFile, useWorkspaceFiles } from '@/hooks/queries/workspace-files'
+import {
+  useUploadWorkspaceFile,
+  useWorkspaceFiles,
+  workspaceFilesKeys,
+} from '@/hooks/queries/workspace-files'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
@@ -166,6 +171,7 @@ export function FileUpload({
   } = useWorkspaceFiles(isPreview ? '' : workspaceId)
 
   const uploadFileMutation = useUploadWorkspaceFile()
+  const queryClient = useQueryClient()
 
   const value = isPreview ? previewValue : storeValue
 
@@ -316,6 +322,7 @@ export function FileUpload({
             workspaceId,
             file,
             skipToast: true,
+            skipInvalidation: true,
           })
 
           uploadedFiles.push({
@@ -345,6 +352,7 @@ export function FileUpload({
 
         if (workspaceId) {
           void refetchWorkspaceFiles()
+          void queryClient.invalidateQueries({ queryKey: workspaceFilesKeys.storageInfo() })
         }
 
         if (uploadedFiles.length === 1) {

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workspace-logo-upload.ts

@@ -1,40 +1,12 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
+import { uploadViaApiFallback } from '@/lib/uploads/client/api-fallback'
 import { DirectUploadError, runUploadStrategy } from '@/lib/uploads/client/direct-upload'
 
 const logger = createLogger('WorkspaceLogoUpload')
 const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5MB
 const ACCEPTED_IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/jpg', 'image/svg+xml', 'image/webp']
 
-async function uploadViaApiFallback(file: File, workspaceId: string): Promise<string> {
-  const formData = new FormData()
-  formData.append('file', file)
-  formData.append('context', 'workspace-logos')
-  formData.append('workspaceId', workspaceId)
-
-  // boundary-raw-fetch: local-dev fallback when cloud storage is not configured; multipart upload incompatible with requestJson
-  const response = await fetch('/api/files/upload', { method: 'POST', body: formData })
-  if (!response.ok) {
-    const errorData = (await response.json().catch(() => ({}))) as {
-      message?: string
-      error?: string
-    }
-    throw new Error(
-      errorData.message || errorData.error || `Failed to upload file: ${response.status}`
-    )
-  }
-  const data = (await response.json()) as {
-    fileInfo?: { path?: string }
-    path?: string
-    url?: string
-  }
-  const publicUrl = data.fileInfo?.path ?? data.path ?? data.url
-  if (!publicUrl) {
-    throw new Error('Invalid upload response: missing path')
-  }
-  return publicUrl
-}
-
 interface UseWorkspaceLogoUploadProps {
   workspaceId?: string
   currentLogoUrl?: string | null
@@ -108,9 +80,9 @@ export function useWorkspaceLogoUpload({
       return result.path
     } catch (error) {
       if (error instanceof DirectUploadError && error.code === 'FALLBACK_REQUIRED') {
-        const publicUrl = await uploadViaApiFallback(file, targetWorkspaceId)
-        logger.info(`Workspace logo uploaded via API fallback: ${publicUrl}`)
-        return publicUrl
+        const { path } = await uploadViaApiFallback(file, 'workspace-logos', targetWorkspaceId)
+        logger.info(`Workspace logo uploaded via API fallback: ${path}`)
+        return path
       }
       throw error
     }

apps/sim/hooks/queries/workspace-files.ts

@@ -206,6 +206,7 @@ interface UploadFileParams {
   onProgress?: (event: UploadProgressEvent) => void
   signal?: AbortSignal
   skipToast?: boolean
+  skipInvalidation?: boolean
 }
 
 interface UploadFileResponse {
@@ -320,7 +321,8 @@ export function useUploadWorkspaceFile() {
   return useMutation({
     mutationFn: ({ workspaceId, file, onProgress, signal }: UploadFileParams) =>
       uploadWorkspaceFile(workspaceId, file, onProgress, signal),
-    onSettled: () => {
+    onSettled: (_data, _error, variables) => {
+      if (variables.skipInvalidation) return
       queryClient.invalidateQueries({ queryKey: workspaceFilesKeys.lists() })
       queryClient.invalidateQueries({ queryKey: workspaceFilesKeys.storageInfo() })
     },

apps/sim/lib/uploads/client/api-fallback.ts

@@ -0,0 +1,42 @@
+import type { StorageContext } from '@/lib/uploads/shared/types'
+
+/**
+ * Server-proxied fallback used only when cloud storage isn't configured (local dev).
+ * Production always takes the presigned PUT path.
+ */
+export async function uploadViaApiFallback(
+  file: File,
+  context: StorageContext,
+  workspaceId?: string
+): Promise<{ path: string; key?: string }> {
+  const formData = new FormData()
+  formData.append('file', file)
+  formData.append('context', context)
+  if (workspaceId) {
+    formData.append('workspaceId', workspaceId)
+  }
+
+  // boundary-raw-fetch: local-dev fallback when cloud storage is not configured; multipart upload incompatible with requestJson
+  const response = await fetch('/api/files/upload', { method: 'POST', body: formData })
+  if (!response.ok) {
+    const errorData = (await response.json().catch(() => ({}))) as {
+      message?: string
+      error?: string
+    }
+    throw new Error(
+      errorData.message || errorData.error || `Failed to upload file: ${response.status}`
+    )
+  }
+  const data = (await response.json()) as {
+    fileInfo?: { path?: string; key?: string }
+    path?: string
+    key?: string
+    url?: string
+  }
+  const path = data.fileInfo?.path ?? data.path ?? data.url
+  const key = data.fileInfo?.key ?? data.key
+  if (!path) {
+    throw new Error('Invalid upload response: missing path')
+  }
+  return { path, key }
+}