feat: use server zip downloads (#128)

Author: cxymds

components/object/list.tsx

@@ -35,6 +35,7 @@ import { useObject } from "@/hooks/use-object"
 import { useBucket } from "@/hooks/use-bucket"
 import { useLocalStorage } from "@/hooks/use-local-storage"
 import { usePermissions } from "@/hooks/use-permissions"
+import { useApi } from "@/contexts/api-context"
 import { useMessage } from "@/lib/feedback/message"
 import { exportFile } from "@/lib/export-file"
 import { getContentType } from "@/lib/mime-types"
@@ -56,12 +57,15 @@ import {
   shouldShowDeleteAllVersions,
   type BucketVersioningState,
 } from "@/lib/object-delete"
+import {
+  buildObjectZipDownloadPayload,
+  normalizeObjectZipDownloadUrl,
+  type CreateObjectZipDownloadResponse,
+} from "@/lib/object-zip-download"
 import { TaskStatsButton } from "@/components/tasks/stats-button"
 import { useAddDeleteKeys, useAddDeleteFolder, useTasks } from "@/contexts/task-context"
 import type { ColumnDef } from "@tanstack/react-table"
 import dayjs from "dayjs"
-import { saveAs } from "file-saver"
-import JSZip from "jszip"
 
 interface ObjectRow {
   Key: string
@@ -95,7 +99,8 @@ export function ObjectList({
 }: ObjectListProps) {
   const { t } = useTranslation()
   const message = useMessage()
-  const { listObject, getSignedUrl, mapAllFiles } = useObject(bucket)
+  const api = useApi()
+  const { listObject, getSignedUrl } = useObject(bucket)
   const { getBucketVersioning } = useBucket()
   const { canCapability } = usePermissions()
   const addDeleteKeys = useAddDeleteKeys()
@@ -416,12 +421,6 @@ export function ObjectList({
 
   const checkedKeys = selectedRowIds
 
-  const computeRelativeKey = (key: string) => {
-    if (!key) return ""
-    const base = prefix || ""
-    return base && key.startsWith(base) ? key.slice(base.length) : key
-  }
-
   const downloadMultiple = async () => {
     if (!checkedKeys.length) {
       message.warning(t("Please select at least one item"))
@@ -434,74 +433,28 @@ export function ObjectList({
       return
     }
 
-    const collecting = message.loading(t("Collecting files"), { duration: 0 })
-    const allFiles: { key: string; relative: string }[] = []
+    const loadingMsg = message.loading(t("Preparing download"), { duration: 0 })
 
     try {
-      for (const item of selectedRows) {
-        if (item.type === "object") {
-          allFiles.push({
-            key: item.Key,
-            relative: computeRelativeKey(item.Key),
-          })
-        } else if (item.type === "prefix") {
-          await mapAllFiles(bucket, item.Key, (fileKey) => {
-            allFiles.push({
-              key: fileKey,
-              relative: computeRelativeKey(fileKey),
-            })
-          })
-        }
-      }
-    } catch (err) {
-      collecting.destroy()
-      message.error((err as Error)?.message ?? t("Download Failed"))
-      return
-    }
-
-    collecting.destroy()
-
-    if (!allFiles.length) {
-      message.warning(t("No files to download"))
-      return
-    }
-
-    const zip = new JSZip()
-    let finished = 0
-    const destroyRef: { current: (() => void) | null } = { current: null }
-
-    const updateProgress = () => {
-      if (destroyRef.current) destroyRef.current()
-      const handle = message.loading(`${t("Downloading files")} ${Math.round((finished / allFiles.length) * 100)}%`, {
-        duration: 0,
+      const payload = buildObjectZipDownloadPayload({
+        bucket,
+        basePrefix: prefix,
+        rows: selectedRows,
       })
-      destroyRef.current = handle.destroy
-    }
+      const response = (await api.post("/object-zip-downloads", payload)) as CreateObjectZipDownloadResponse
 
-    updateProgress()
+      if (!response.download_url) {
+        throw new Error(t("Download Failed"))
+      }
 
-    try {
-      await Promise.all(
-        allFiles.map(async ({ key, relative }) => {
-          const url = await getSignedUrl(key)
-          const response = await fetch(url)
-          const blob = await response.blob()
-          zip.file(relative || key, blob)
-          finished++
-          updateProgress()
-        }),
-      )
+      window.location.href = normalizeObjectZipDownloadUrl(response.download_url, api.resolveUrl("/"))
+      table.resetRowSelection()
+      message.success(t("Download ready"))
     } catch (err) {
-      if (destroyRef.current) destroyRef.current()
       message.error((err as Error)?.message ?? t("Download Failed"))
-      return
+    } finally {
+      loadingMsg.destroy()
     }
-
-    if (destroyRef.current) destroyRef.current()
-
-    const content = await zip.generateAsync({ type: "blob" })
-    saveAs(content, `${bucket ?? "download"}.zip`)
-    message.success(t("Download ready"))
   }
 
   const openDeleteDialog = (keys: string[]) => {

lib/api-client.ts

@@ -40,6 +40,10 @@ export class ApiClient {
     this.errorHandler = handler
   }
 
+  resolveUrl(url: string): string {
+    return new URL(url, this.config?.baseUrl).toString()
+  }
+
   async request(url: string, options: RequestOptions = {}, parseJson: boolean = true) {
     url = this.config?.baseUrl ? joinURL(this.config?.baseUrl, url) : url
     options.headers = { ...this.config?.headers, ...options.headers }

lib/object-zip-download.js

@@ -0,0 +1,30 @@
+function sanitizeZipFilename(value) {
+  const cleaned = value
+    .trim()
+    .replace(/[\\/:*?"<>|]+/g, "-")
+    .replace(/^\.+$/, "")
+    .replace(/^-+|-+$/g, "")
+
+  return cleaned || "download"
+}
+
+export function getObjectZipDownloadFilename(bucket, basePrefix) {
+  const normalizedPrefix = basePrefix.replace(/\/+$/g, "")
+  const name = normalizedPrefix ? normalizedPrefix.split("/").pop() : bucket
+
+  return `${sanitizeZipFilename(name || bucket || "download")}.zip`
+}
+
+export function buildObjectZipDownloadPayload({ bucket, basePrefix, rows }) {
+  return {
+    bucket,
+    prefix: basePrefix,
+    objects: rows.filter((row) => row.type === "object").map((row) => row.Key),
+    prefixes: rows.filter((row) => row.type === "prefix").map((row) => row.Key),
+    filename: getObjectZipDownloadFilename(bucket, basePrefix),
+  }
+}
+
+export function normalizeObjectZipDownloadUrl(downloadUrl, origin) {
+  return new URL(downloadUrl, origin).toString()
+}

lib/object-zip-download.ts

@@ -0,0 +1,58 @@
+export interface ObjectZipDownloadRow {
+  Key: string
+  type: "prefix" | "object"
+}
+
+export interface BuildObjectZipDownloadPayloadInput {
+  bucket: string
+  basePrefix: string
+  rows: ObjectZipDownloadRow[]
+}
+
+export interface ObjectZipDownloadPayload {
+  bucket: string
+  prefix: string
+  objects: string[]
+  prefixes: string[]
+  filename: string
+}
+
+export interface CreateObjectZipDownloadResponse {
+  download_url: string
+  expires_at?: string
+}
+
+function sanitizeZipFilename(value: string) {
+  const cleaned = value
+    .trim()
+    .replace(/[\\/:*?"<>|]+/g, "-")
+    .replace(/^\.+$/, "")
+    .replace(/^-+|-+$/g, "")
+
+  return cleaned || "download"
+}
+
+export function getObjectZipDownloadFilename(bucket: string, basePrefix: string) {
+  const normalizedPrefix = basePrefix.replace(/\/+$/g, "")
+  const name = normalizedPrefix ? normalizedPrefix.split("/").pop() : bucket
+
+  return `${sanitizeZipFilename(name || bucket || "download")}.zip`
+}
+
+export function buildObjectZipDownloadPayload({
+  bucket,
+  basePrefix,
+  rows,
+}: BuildObjectZipDownloadPayloadInput): ObjectZipDownloadPayload {
+  return {
+    bucket,
+    prefix: basePrefix,
+    objects: rows.filter((row) => row.type === "object").map((row) => row.Key),
+    prefixes: rows.filter((row) => row.type === "prefix").map((row) => row.Key),
+    filename: getObjectZipDownloadFilename(bucket, basePrefix),
+  }
+}
+
+export function normalizeObjectZipDownloadUrl(downloadUrl: string, origin: string) {
+  return new URL(downloadUrl, origin).toString()
+}

package.json

@@ -30,13 +30,11 @@
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.20",
     "embla-carousel-react": "^8.6.0",
-    "file-saver": "^2.0.5",
     "hyparquet": "^1.26.0",
     "hyparquet-compressors": "^1.1.1",
     "i18next": "^25.10.4",
     "i18next-browser-languagedetector": "^8.2.1",
     "input-otp": "^1.4.2",
-    "jszip": "^3.10.1",
     "next": "^16.2.1",
     "next-themes": "^0.4.6",
     "node-forge": "^1.3.3",
@@ -55,7 +53,6 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.2.2",
-    "@types/file-saver": "^2.0.7",
     "@types/node": "^20.19.37",
     "@types/node-forge": "^1.3.14",
     "@types/react": "^19.2.14",