improvement(uploads): migrate workflow file-upload sub-block to presigned PUT

Author: waleedlatif1

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

@@ -12,7 +12,7 @@ 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 { useWorkspaceFiles } from '@/hooks/queries/workspace-files'
+import { useUploadWorkspaceFile, useWorkspaceFiles } from '@/hooks/queries/workspace-files'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
@@ -165,6 +165,8 @@ export function FileUpload({
     refetch: refetchWorkspaceFiles,
   } = useWorkspaceFiles(isPreview ? '' : workspaceId)
 
+  const uploadFileMutation = useUploadWorkspaceFile()
+
   const value = isPreview ? previewValue : storeValue
 
   /**
@@ -310,58 +312,24 @@ export function FileUpload({
 
       for (const file of validFiles) {
         try {
-          const formData = new FormData()
-          formData.append('file', file)
-          formData.append('context', 'workspace')
-
-          if (workspaceId) {
-            formData.append('workspaceId', workspaceId)
-          }
-
-          // boundary-raw-fetch: multipart/form-data upload (FileUpload boundary), incompatible with requestJson which JSON-stringifies bodies
-          const response = await fetch('/api/files/upload', {
-            method: 'POST',
-            body: formData,
+          const data = await uploadFileMutation.mutateAsync({
+            workspaceId,
+            file,
+            skipToast: true,
           })
 
-          const data = await response.json()
-
-          if (!response.ok) {
-            const errorMessage =
-              data.message || data.error || `Failed to upload file: ${response.status}`
-            uploadErrors.push(`${file.name}: ${errorMessage}`)
-
-            setUploadError(errorMessage)
-
-            if (data.isDuplicate || response.status === 409) {
-              setTimeout(() => setUploadError(null), 5000)
-            }
-            continue
-          }
-
-          if (data.success === false) {
-            const errorMessage = data.error || 'Upload failed'
-            uploadErrors.push(`${file.name}: ${errorMessage}`)
-
-            setUploadError(errorMessage)
-
-            if (data.isDuplicate) {
-              setTimeout(() => setUploadError(null), 5000)
-            }
-            continue
-          }
-
           uploadedFiles.push({
-            name: file.name,
-            path: data.file?.url || data.url, // Workspace: data.file.url, Non-workspace: data.url
-            key: data.file?.key || data.key, // Storage key for proper file access
-            size: file.size,
-            type: file.type,
+            name: data.file.name,
+            path: data.file.url,
+            key: data.file.key,
+            size: data.file.size,
+            type: data.file.type,
           })
         } catch (error) {
           logger.error(`Error uploading ${file.name}:`, error)
           const errorMessage = error instanceof Error ? error.message : 'Unknown error'
           uploadErrors.push(`${file.name}: ${errorMessage}`)
+          setUploadError(errorMessage)
         }
       }