fix(ui): display file upload messages

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/knowledge/hooks/use-knowledge-upload.ts

@@ -794,7 +794,7 @@ export function useKnowledgeUpload(options: UseKnowledgeUploadOptions = {}) {
         }
 
         throw new DirectUploadError(
-          `Failed to upload ${file.name}: ${errorData?.error || 'Unknown error'}`,
+          `Failed to upload ${file.name}: ${errorData?.message || errorData?.error || 'Unknown error'}`,
           errorData
         )
       }

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

@@ -78,8 +78,10 @@ export function useProfilePictureUpload({
         })
 
         if (!response.ok) {
-          const errorData = await response.json().catch(() => ({ error: response.statusText }))
-          throw new Error(errorData.error || `Failed to upload file: ${response.status}`)
+          const errorData = await response.json().catch(() => ({ message: response.statusText }))
+          throw new Error(
+            errorData.message || errorData.error || `Failed to upload file: ${response.status}`
+          )
         }
 
         const data = await response.json()

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

@@ -2,7 +2,9 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
+import { toError } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
+import { toast } from '@/components/emcn'
 import { resolveFileType } from '@/lib/uploads/utils/file-utils'
 
 const logger = createLogger('useFileAttachments')
@@ -147,9 +149,13 @@ export function useFileAttachments(props: UseFileAttachmentsProps) {
 
             if (!uploadResponse.ok) {
               const errorData = await uploadResponse.json().catch(() => ({
-                error: `Upload failed: ${uploadResponse.status}`,
+                message: `Upload failed: ${uploadResponse.status}`,
               }))
-              throw new Error(errorData.error || `Failed to upload file: ${uploadResponse.status}`)
+              throw new Error(
+                errorData.message ||
+                  errorData.error ||
+                  `Failed to upload file: ${uploadResponse.status}`
+              )
             }
 
             const uploadData = await uploadResponse.json()
@@ -172,6 +178,9 @@ export function useFileAttachments(props: UseFileAttachmentsProps) {
             )
           } catch (error) {
             logger.error(`File upload failed: ${error}`)
+            toast.error(`Couldn't upload "${file.name}"`, {
+              description: toError(error).message,
+            })
             if (placeholder.previewUrl) URL.revokeObjectURL(placeholder.previewUrl)
             setAttachedFiles((prev) => prev.filter((f) => f.id !== placeholder.id))
           }

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

@@ -328,7 +328,8 @@ export function FileUpload({
           const data = await response.json()
 
           if (!response.ok) {
-            const errorMessage = data.error || `Failed to upload file: ${response.status}`
+            const errorMessage =
+              data.message || data.error || `Failed to upload file: ${response.status}`
             uploadErrors.push(`${file.name}: ${errorMessage}`)
 
             setUploadError(errorMessage)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts

@@ -494,8 +494,9 @@ export function useWorkflowExecution() {
                       logger.error('Unexpected upload response format:', uploadResult)
                     }
                   } else {
-                    const errorText = await response.text()
-                    const message = `Failed to upload ${fileData.name}: ${response.status} ${errorText}`
+                    const errorData = await response.json().catch(() => null)
+                    const reason = errorData?.message || errorData?.error || `${response.status}`
+                    const message = `Failed to upload ${fileData.name}: ${reason}`
                     logger.error(message)
                     if (isUploadErrorCapable(workflowInput)) {
                       try {

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

@@ -73,8 +73,10 @@ export function useWorkspaceLogoUpload({
     })
 
     if (!response.ok) {
-      const errorData = await response.json().catch(() => ({ error: response.statusText }))
-      throw new Error(errorData.error || `Failed to upload file: ${response.status}`)
+      const errorData = await response.json().catch(() => ({ message: response.statusText }))
+      throw new Error(
+        errorData.message || errorData.error || `Failed to upload file: ${response.status}`
+      )
     }
 
     const data = await response.json()