fix file upload

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx

@@ -158,6 +158,7 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     isLoading: isSending,
   })
   const hasFiles = files.attachedFiles.some((f) => !f.uploading && f.key)
+  const hasUploadingFiles = files.attachedFiles.some((f) => f.uploading)
 
   const contextManagement = useContextManagement({ message: value })
 
@@ -232,7 +233,7 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     setSelectedContexts: contextManagement.setSelectedContexts,
   })
 
-  const canSubmit = (value.trim().length > 0 || hasFiles) && !isSending
+  const canSubmit = (value.trim().length > 0 || hasFiles) && !isSending && !hasUploadingFiles
 
   const valueRef = useRef(value)
   valueRef.current = value
@@ -507,6 +508,8 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
 
       if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
         e.preventDefault()
+        // Mirror canSubmit's uploading guard; Enter reads refs, not rendered state.
+        if (filesRef.current.attachedFiles.some((f) => f.uploading)) return
         const hasSubmitPayload =
           valueRef.current.trim().length > 0 ||
           filesRef.current.attachedFiles.some((file) => !file.uploading && file.key)

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

@@ -104,8 +104,8 @@ export function useFileAttachments(props: UseFileAttachmentsProps) {
   }, [])
 
   /**
-   * Processes and uploads files to S3
-   * @param fileList - Files to process
+   * Uploads files in parallel so a slow file does not block faster ones queued
+   * behind it. All placeholders insert in a single state update for a stable row.
    */
   const processFiles = useCallback(
     async (fileList: FileList) => {
@@ -114,67 +114,69 @@ export function useFileAttachments(props: UseFileAttachmentsProps) {
         return
       }
 
-      for (const file of Array.from(fileList)) {
-        let previewUrl: string | undefined
-        if (file.type.startsWith('image/')) {
-          previewUrl = URL.createObjectURL(file)
-        }
-
-        const resolvedType = resolveFileType(file)
-
-        const tempFile: AttachedFile = {
-          id: generateId(),
-          name: file.name,
-          size: file.size,
-          type: resolvedType,
-          path: '',
-          uploading: true,
-          previewUrl,
-        }
-
-        setAttachedFiles((prev) => [...prev, tempFile])
-
-        try {
-          const formData = new FormData()
-          formData.append('file', file)
-          formData.append('context', 'mothership')
-          if (workspaceId) {
-            formData.append('workspaceId', workspaceId)
-          }
-
-          const uploadResponse = await fetch('/api/files/upload', {
-            method: 'POST',
-            body: formData,
-          })
-
-          if (!uploadResponse.ok) {
-            const errorData = await uploadResponse.json().catch(() => ({
-              error: `Upload failed: ${uploadResponse.status}`,
-            }))
-            throw new Error(errorData.error || `Failed to upload file: ${uploadResponse.status}`)
-          }
-
-          const uploadData = await uploadResponse.json()
-
-          logger.info(`File uploaded successfully: ${uploadData.fileInfo?.path || uploadData.path}`)
+      const files = Array.from(fileList)
+      if (files.length === 0) return
+
+      const placeholders: AttachedFile[] = files.map((file) => ({
+        id: generateId(),
+        name: file.name,
+        size: file.size,
+        type: resolveFileType(file),
+        path: '',
+        uploading: true,
+        previewUrl: file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined,
+      }))
+
+      setAttachedFiles((prev) => [...prev, ...placeholders])
+
+      await Promise.all(
+        files.map(async (file, i) => {
+          const placeholder = placeholders[i]
+          try {
+            const formData = new FormData()
+            formData.append('file', file)
+            formData.append('context', 'mothership')
+            if (workspaceId) {
+              formData.append('workspaceId', workspaceId)
+            }
+
+            const uploadResponse = await fetch('/api/files/upload', {
+              method: 'POST',
+              body: formData,
+            })
+
+            if (!uploadResponse.ok) {
+              const errorData = await uploadResponse.json().catch(() => ({
+                error: `Upload failed: ${uploadResponse.status}`,
+              }))
+              throw new Error(errorData.error || `Failed to upload file: ${uploadResponse.status}`)
+            }
+
+            const uploadData = await uploadResponse.json()
+
+            logger.info(
+              `File uploaded successfully: ${uploadData.fileInfo?.path || uploadData.path}`
+            )
 
-          setAttachedFiles((prev) =>
-            prev.map((f) =>
-              f.id === tempFile.id
-                ? {
-                    ...f,
-                    path: uploadData.fileInfo?.path || uploadData.path || uploadData.url,
-                    key: uploadData.fileInfo?.key || uploadData.key,
-                    uploading: false,
-                  }
-                : f
+            setAttachedFiles((prev) =>
+              prev.map((f) =>
+                f.id === placeholder.id
+                  ? {
+                      ...f,
+                      path: uploadData.fileInfo?.path || uploadData.path || uploadData.url,
+                      key: uploadData.fileInfo?.key || uploadData.key,
+                      uploading: false,
+                    }
+                  : f
+              )
             )
-          )
-        } catch (error) {
-          logger.error(`File upload failed: ${error}`)
-          setAttachedFiles((prev) => prev.filter((f) => f.id !== tempFile.id))
-        }
-      }
+          } catch (error) {
+            logger.error(`File upload failed: ${error}`)
+            if (placeholder.previewUrl) URL.revokeObjectURL(placeholder.previewUrl)
+            setAttachedFiles((prev) => prev.filter((f) => f.id !== placeholder.id))
+          }
+        })
+      )
     },
     [userId, workspaceId]
   )