improvement(files): surface archive download errors in place

Bulk and folder downloads navigated to the API route, so any rejection replaced
the Files page with the raw JSON error body. Single-file download already
fetched and saved the blob, so the two paths had diverged.

That was survivable when the only failures were "too many files" and "too
large"; resolving rendered documents adds a 409 for a still-compiling artifact,
which is reachable in normal use. Both archive paths now fetch the zip and show
the server's message as a toast — the route writes that copy for a person, so it
is worth surfacing rather than discarding. Single-file download shows its error
too instead of only logging it.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/files.tsx

@@ -27,7 +27,7 @@ import { usePostHog } from 'posthog-js/react'
 import { getDocumentIcon } from '@/components/icons/document-icons'
 import { useLimitUpgradeToast } from '@/lib/billing/client'
 import { captureEvent } from '@/lib/posthog/client'
-import { triggerFileDownload } from '@/lib/uploads/client/download'
+import { triggerArchiveDownload, triggerFileDownload } from '@/lib/uploads/client/download'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import { MAX_WORKSPACE_FILE_SIZE } from '@/lib/uploads/shared/types'
 import {
@@ -951,6 +951,7 @@ export function Files() {
         })
       } catch (err) {
         logger.error('Failed to download file:', err)
+        toast.error(toError(err).message)
       }
     },
     [workspaceId]
@@ -1071,7 +1072,7 @@ export function Files() {
     setShowDeleteConfirm(true)
   }, [selectedFileIds, selectedFolderIds, files, folders])
 
-  const handleBulkDownload = useCallback(() => {
+  const handleBulkDownload = useCallback(async () => {
     const selectedFiles = files.filter((file) => selectedFileIds.includes(file.id))
     if (selectedFiles.length === 1 && selectedFolderIds.length === 0) {
       handleDownload(selectedFiles[0])
@@ -1088,7 +1089,14 @@ export function Files() {
       is_bulk: true,
       file_count: selectedFileIds.length + selectedFolderIds.length,
     })
-    window.location.href = `/api/workspaces/${workspaceId}/files/download?${query.toString()}`
+    try {
+      await triggerArchiveDownload(
+        `/api/workspaces/${workspaceId}/files/download?${query.toString()}`
+      )
+    } catch (err) {
+      logger.error('Failed to download selection:', err)
+      toast.error(toError(err).message)
+    }
   }, [selectedFileIds, selectedFolderIds, files, handleDownload, workspaceId])
 
   const fileDetailBreadcrumbs = useMemo(() => {
@@ -1285,8 +1293,14 @@ export function Files() {
       return
     }
     if (item.kind === 'folder') {
-      window.location.href = `/api/workspaces/${workspaceId}/files/download?folderIds=${encodeURIComponent(item.folder.id)}`
+      const folderId = item.folder.id
       closeContextMenu()
+      triggerArchiveDownload(
+        `/api/workspaces/${workspaceId}/files/download?folderIds=${encodeURIComponent(folderId)}`
+      ).catch((err) => {
+        logger.error('Failed to download folder:', err)
+        toast.error(toError(err).message)
+      })
       return
     }
     handleDownload(item.file)

apps/sim/lib/uploads/client/download.ts

@@ -1,5 +1,35 @@
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 
+/** Hand a fetched blob to the browser as a file save, then release the object URL. */
+function saveBlob(blob: Blob, fileName: string): void {
+  const objectUrl = URL.createObjectURL(blob)
+  const anchor = document.createElement('a')
+  anchor.href = objectUrl
+  anchor.download = fileName
+  document.body.appendChild(anchor)
+  anchor.click()
+  document.body.removeChild(anchor)
+  URL.revokeObjectURL(objectUrl)
+}
+
+function fileNameFromDisposition(response: Response, fallback: string): string {
+  return response.headers.get('Content-Disposition')?.match(/filename="([^"]+)"/)?.[1] ?? fallback
+}
+
+/**
+ * Read the server's error copy off a failed download so the caller can surface it.
+ * These routes answer with `{ error }` and the message is written for the user —
+ * which document is still compiling, which entry is too large.
+ */
+async function downloadErrorMessage(response: Response, fallback: string): Promise<string> {
+  try {
+    const body = await response.json()
+    return typeof body?.error === 'string' && body.error ? body.error : fallback
+  } catch {
+    return fallback
+  }
+}
+
 export async function triggerFileDownload(record: WorkspaceFileRecord): Promise<void> {
   const isMarkdown =
     record.type === 'text/markdown' ||
@@ -10,17 +40,26 @@ export async function triggerFileDownload(record: WorkspaceFileRecord): Promise<
     ? `/api/files/export/${encodeURIComponent(record.id)}`
     : `/api/files/serve/${encodeURIComponent(record.key)}?context=workspace&t=${Date.now()}`
 
+  // boundary-raw-fetch: binary download read as a blob, not a JSON contract response
   const response = await fetch(url, { cache: 'no-store' })
-  if (!response.ok) throw new Error(`Failed to download file: ${response.statusText}`)
+  if (!response.ok) {
+    throw new Error(await downloadErrorMessage(response, `Failed to download "${record.name}"`))
+  }
 
-  const blob = await response.blob()
-  const objectUrl = URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  a.href = objectUrl
-  a.download =
-    response.headers.get('Content-Disposition')?.match(/filename="([^"]+)"/)?.[1] ?? record.name
-  document.body.appendChild(a)
-  a.click()
-  document.body.removeChild(a)
-  URL.revokeObjectURL(objectUrl)
+  saveBlob(await response.blob(), fileNameFromDisposition(response, record.name))
+}
+
+/**
+ * Download a multi-file selection as a zip. Fetched rather than navigated to, so a
+ * rejection — a document still compiling, an entry too large — surfaces as an error
+ * the caller can show in place instead of replacing the page with raw JSON.
+ */
+export async function triggerArchiveDownload(url: string): Promise<void> {
+  // boundary-raw-fetch: binary zip download read as a blob, not a JSON contract response
+  const response = await fetch(url, { cache: 'no-store' })
+  if (!response.ok) {
+    throw new Error(await downloadErrorMessage(response, 'Failed to download the selected files'))
+  }
+
+  saveBlob(await response.blob(), fileNameFromDisposition(response, 'workspace-files.zip'))
 }