feat: download multiple object selection as zip and each prefix as zip ignoring any deleted objects selected

Author: prakashsvmx

portal-ui/src/api/consoleApi.ts

@@ -2139,6 +2139,28 @@ export class Api<
         ...params,
       }),
 
+    /**
+     * No description
+     *
+     * @tags Object
+     * @name DownloadMultipleObjects
+     * @summary Download Multiple Objects
+     * @request POST:/buckets/{bucket_name}/objects/download-multiple
+     * @secure
+     */
+    downloadMultipleObjects: (
+      bucketName: string,
+      objectList: string[],
+      params: RequestParams = {},
+    ) =>
+      this.request<File, Error>({
+        path: `/buckets/${bucketName}/objects/download-multiple`,
+        method: "POST",
+        body: objectList,
+        secure: true,
+        ...params,
+      }),
+
     /**
      * No description
      *

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx

@@ -912,6 +912,11 @@ const ListObjects = () => {
     createdTime = DateTime.fromISO(bucketInfo.creation_date);
   }
 
+  const downloadToolTip =
+    selectedObjects?.length <= 1
+      ? "Download Selected"
+      : ` Download selected objects as Zip. Note: Any prefix selected would download as a different zip. Any Deleted objects in the selection would be skipped from download.`;
+
   const multiActionButtons = [
     {
       action: () => {
@@ -921,7 +926,7 @@ const ListObjects = () => {
       disabled: !canDownload || selectedObjects?.length === 0,
       icon: <DownloadIcon />,
       tooltip: canDownload
-        ? "Download Selected"
+        ? downloadToolTip
         : permissionTooltipHelper(
             [IAM_SCOPES.S3_GET_OBJECT, IAM_SCOPES.S3_GET_ACTIONS],
             "download objects from this bucket",

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/utils.ts

@@ -18,8 +18,52 @@ import { BucketObjectItem } from "./ListObjects/types";
 import { encodeURLString } from "../../../../../common/utils";
 import { removeTrace } from "../../../ObjectBrowser/transferManager";
 import store from "../../../../../store";
-import { PermissionResource } from "api/consoleApi";
+import { ContentType, PermissionResource } from "api/consoleApi";
+import { api } from "../../../../../api";
+import { setErrorSnackMessage } from "../../../../../systemSlice";
+
+const downloadWithLink = (href: string, downloadFileName: string) => {
+  const link = document.createElement("a");
+  link.href = href;
+  link.download = downloadFileName;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
 
+export const downloadSelectedAsZip = async (
+  bucketName: string,
+  objectList: string[],
+  resultFileName: string,
+) => {
+  const state = store.getState();
+  const anonymousMode = state.system.anonymousMode;
+
+  try {
+    const resp = await api.buckets.downloadMultipleObjects(
+      bucketName,
+      objectList,
+      {
+        type: ContentType.Json,
+        headers: anonymousMode
+          ? {
+              "X-Anonymous": "1",
+            }
+          : undefined,
+      },
+    );
+    const blob = await resp.blob();
+    const href = window.URL.createObjectURL(blob);
+    downloadWithLink(href, resultFileName);
+  } catch (err: any) {
+    store.dispatch(
+      setErrorSnackMessage({
+        errorMessage: `Download of multiple files failed. ${err.statusText}`,
+        detailedError: "",
+      }),
+    );
+  }
+};
 export const download = (
   bucketName: string,
   objectPath: string,
@@ -33,8 +77,6 @@ export const download = (
   abortCallback: () => void,
   toastCallback: () => void,
 ) => {
-  const anchor = document.createElement("a");
-  document.body.appendChild(anchor);
   let basename = document.baseURI.replace(window.location.origin, "");
   const state = store.getState();
   const anonymousMode = state.system.anonymousMode;
@@ -90,12 +132,7 @@ export const download = (
 
         removeTrace(id);
 
-        var link = document.createElement("a");
-        link.href = window.URL.createObjectURL(req.response);
-        link.download = filename;
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
+        downloadWithLink(window.URL.createObjectURL(req.response), filename);
       } else {
         if (req.getResponseHeader("Content-Type") === "application/json") {
           const rspBody: { detailedMessage?: string } = JSON.parse(

portal-ui/src/screens/Console/ObjectBrowser/objectBrowserThunks.ts

@@ -19,7 +19,10 @@ import { AppState } from "../../../store";
 import { encodeURLString, getClientOS } from "../../../common/utils";
 import { BucketObjectItem } from "../Buckets/ListBuckets/Objects/ListObjects/types";
 import { makeid, storeCallForObjectWithID } from "./transferManager";
-import { download } from "../Buckets/ListBuckets/Objects/utils";
+import {
+  download,
+  downloadSelectedAsZip,
+} from "../Buckets/ListBuckets/Objects/utils";
 import {
   cancelObjectInList,
   completeObject,
@@ -33,6 +36,7 @@ import {
   updateProgress,
 } from "./objectBrowserSlice";
 import { setSnackBarMessage } from "../../../systemSlice";
+import { DateTime } from "luxon";
 
 export const downloadSelected = createAsyncThunk(
   "objectBrowser/downloadSelected",
@@ -104,21 +108,57 @@ export const downloadSelected = createAsyncThunk(
 
       itemsToDownload = state.objectBrowser.records.filter(filterFunction);
 
-      // I case just one element is selected, then we trigger download modal validation.
-      // We are going to enforce zip download when multiple files are selected
+      // In case just one element is selected, then we trigger download modal validation.
       if (itemsToDownload.length === 1) {
         if (
           itemsToDownload[0].name.length > 200 &&
           getClientOS().toLowerCase().includes("win")
         ) {
           dispatch(setDownloadRenameModal(itemsToDownload[0]));
           return;
+        } else {
+          downloadObject(itemsToDownload[0]);
+        }
+      } else {
+        if (itemsToDownload.length === 1) {
+          downloadObject(itemsToDownload[0]);
+        } else if (itemsToDownload.length > 1) {
+          const fileName = `${DateTime.now().toFormat(
+            "LL-dd-yyyy-HH-mm-ss",
+          )}_files_list.zip`;
+
+          const prefixesToDownload: BucketObjectItem[] = [];
+          // We are enforcing zip download when multiple files are selected for better user experience
+          const multiObjList = itemsToDownload.reduce((dwList: any[], bi) => {
+            // Download only objects as zip, and download each prefix individually as zip.
+            // Skip any deleted files selected via "Show deleted objects" in selection and log for debugging
+            const isPrefix = bi?.name.endsWith("/");
+            const isDeleted = bi?.delete_flag;
+
+            if (bi && !isPrefix && !isDeleted) {
+              dwList.push(bi.name);
+            } else {
+              if (isPrefix && !isDeleted) {
+                prefixesToDownload.push(bi);
+              } else {
+                console.log(`Skipping ${bi?.name} from download.`);
+              }
+            }
+            return dwList;
+          }, []);
+
+          //  Download selected objects as Zip.
+          //  can we batch with some limit like 100 or 1000 files at a time?
+          await downloadSelectedAsZip(bucketName, multiObjList, fileName);
+          // now begin download of each selected prefix as zip
+          if (prefixesToDownload.length) {
+            prefixesToDownload.forEach((prefix) => {
+              downloadObject(prefix);
+            });
+          }
+          return;
         }
       }
-
-      itemsToDownload.forEach((filteredItem) => {
-        downloadObject(filteredItem);
-      });
     }
   },
 );