feat(filemanager): add download all button and 4GB archive size warning/disable

public/locales/en-US/application.json

@@ -315,6 +315,8 @@
     "open": "Open",
     "openParentFolder": "Go to parent folder",
     "download": "Download",
+    "downloadAll": "Download all",
+    "downloadFolder": "Download folder",
     "batchDownload": "Download in batch",
     "share": "Share",
     "rename": "Rename",
@@ -410,6 +412,7 @@
     "browserDownloadDescription": "Your browser downloads files one by one and retain the folder structure to the local directory you specified.",
     "browserBatchDownload": "Browser-side archiving",
     "browserBatchDownloadDescription": "Downloaded and packaged to a Zip file by the browser in real time, it cannot handle data more than 4GB.",
+    "browserBatchDownloadSizeExceeded": "Total size {{size}} exceeds the 4 GB browser archive limit.",
     "serverBatchDownload": "Server-side archiving",
     "serverBatchDownloadDescription": "Archive by the server to a Zip file and sent to the client for download on-the-fly, share link shortcut is not supported.",
     "selectArchiveMethod": "Select archive method",

src/component/Dialogs/SelectOption.tsx

@@ -44,7 +44,7 @@ const SelectOption = () => {
       <DialogContent>
         <List component="nav">
           {options?.map((o) => (
-            <ListItemButton key={o.value} onClick={() => onAccept(o.value)}>
+            <ListItemButton key={o.value} disabled={o.disabled} onClick={() => onAccept(o.value)}>
               <ListItemText
                 primary={o.name}
                 secondary={o.description}

src/component/FileManager/TopBar/MoreActionMenu.tsx

@@ -4,6 +4,7 @@ import { useCallback, useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { clearSelected } from "../../../redux/fileManagerSlice.ts";
 import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts";
+import { downloadAllFiles } from "../../../redux/thunks/download.ts";
 import { createShareShortcut, isMacbook } from "../../../redux/thunks/file.ts";
 import { inverseSelection, pinCurrentView, refreshFileList, selectAll } from "../../../redux/thunks/filemanager.ts";
 import SessionManager from "../../../session";
@@ -13,6 +14,7 @@ import ArrowSync from "../../Icons/ArrowSync.tsx";
 import Border from "../../Icons/Border.tsx";
 import BorderAll from "../../Icons/BorderAll.tsx";
 import BorderInside from "../../Icons/BorderInside.tsx";
+import Download from "../../Icons/Download.tsx";
 import FolderLink from "../../Icons/FolderLink.tsx";
 import PinOutlined from "../../Icons/PinOutlined.tsx";
 import { DenseDivider, SquareMenu, SquareMenuItem } from "../ContextMenu/ContextMenu.tsx";
@@ -57,6 +59,11 @@ const MoreActionMenu = ({ onClose, ...rest }: MenuProps) => {
     dispatch(inverseSelection(fmIndex));
   }, [dispatch, onClose, fmIndex]);
 
+  const onDownloadAllClicked = useCallback(() => {
+    onClose && onClose({}, "escapeKeyDown");
+    dispatch(downloadAllFiles(fmIndex));
+  }, [dispatch, onClose, fmIndex]);
+
   const onRefreshClicked = useCallback(() => {
     onClose && onClose({}, "escapeKeyDown");
     dispatch(refreshFileList(fmIndex));
@@ -126,6 +133,17 @@ const MoreActionMenu = ({ onClose, ...rest }: MenuProps) => {
         </ListItemIcon>
         <ListItemText>{t("application:fileManager.invertSelection")}</ListItemText>
       </SquareMenuItem>
+      {fs != Filesystem.trash && fs != Filesystem.share && (
+        <>
+          <DenseDivider />
+          <SquareMenuItem onClick={onDownloadAllClicked}>
+            <ListItemIcon>
+              <Download fontSize="small" />
+            </ListItemIcon>
+            <ListItemText>{t("application:fileManager.downloadAll")}</ListItemText>
+          </SquareMenuItem>
+        </>
+      )}
     </SquareMenu>
   );
 };

src/component/FileManager/TopBar/NavHeader.tsx

@@ -1,13 +1,26 @@
 import { Stack, useMediaQuery, useTheme } from "@mui/material";
-import Breadcrumb from "./Breadcrumb.tsx";
-import TopActions from "./TopActions.tsx";
+import { useContext } from "react";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts";
+import { downloadAllFiles } from "../../../redux/thunks/download.ts";
+import { Filesystem } from "../../../util/uri.ts";
 import { RadiusFrame } from "../../Frame/RadiusFrame.tsx";
-import TopActionsSecondary from "./TopActionsSecondary.tsx";
+import Download from "../../Icons/Download.tsx";
+import { FmIndexContext } from "../FmIndexContext.tsx";
 import { SearchIndicator } from "../Search/SearchIndicator.tsx";
+import Breadcrumb from "./Breadcrumb.tsx";
+import TopActions, { ActionButton, ActionButtonGroup } from "./TopActions.tsx";
+import TopActionsSecondary from "./TopActionsSecondary.tsx";
 
 const NavHeader = () => {
   const theme = useTheme();
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const fmIndex = useContext(FmIndexContext);
+  const fs = useAppSelector((state) => state.fileManager[fmIndex].current_fs);
+  const isSingleFileView = useAppSelector((state) => state.fileManager[fmIndex].list?.single_file_view);
+  const showDownloadFolder = fs == Filesystem.share && !isSingleFileView;
   return (
     <Stack
       direction={"row"}
@@ -36,6 +49,19 @@ const NavHeader = () => {
       <RadiusFrame>
         <TopActions />
       </RadiusFrame>
+      {showDownloadFolder && (
+        <RadiusFrame>
+          <ActionButtonGroup variant="outlined">
+            <ActionButton
+              startIcon={<Download />}
+              onClick={() => dispatch(downloadAllFiles(fmIndex))}
+              sx={{ color: "primary.main" }}
+            >
+              {t("application:fileManager.downloadFolder")}
+            </ActionButton>
+          </ActionButtonGroup>
+        </RadiusFrame>
+      )}
     </Stack>
   );
 };

src/redux/globalStateSlice.ts

@@ -79,6 +79,7 @@ export interface DialogSelectOption {
   name: string;
   description: string;
   value: any;
+  disabled?: boolean;
 }
 
 export interface DesktopCallbackState {

src/redux/thunks/download.ts

@@ -2,8 +2,8 @@ import dayjs from "dayjs";
 import i18next from "i18next";
 import { closeSnackbar, enqueueSnackbar } from "notistack";
 import streamSaver from "streamsaver";
-import { getFileEntityUrl } from "../../api/api.ts";
-import { FileResponse, FileType, Metadata } from "../../api/explorer.ts";
+import { getFileEntityUrl, getFileList } from "../../api/api.ts";
+import { FileResponse, FileType, ListResponse, Metadata } from "../../api/explorer.ts";
 import { GroupPermission } from "../../api/user.ts";
 import {
   DefaultCloseAction,
@@ -12,7 +12,7 @@ import {
   BatchDownloadCompleteAction,
 } from "../../component/Common/Snackbar/snackbar.tsx";
 import SessionManager from "../../session";
-import { getFileLinkedUri } from "../../util";
+import { getFileLinkedUri, sizeToString } from "../../util";
 import Boolset from "../../util/boolset.ts";
 import { formatLocalTime } from "../../util/datetime.ts";
 import {
@@ -25,6 +25,7 @@ import { closeContextMenu } from "../fileManagerSlice.ts";
 import { DialogSelectOption, setBatchDownloadLog, setBatchDownloadProgress } from "../globalStateSlice.ts";
 import { AppThunk } from "../store.ts";
 import { promiseId, selectOption } from "./dialog.ts";
+import { MinPageSize } from "../../component/FileManager/TopBar/ViewOptionPopover.tsx";
 import { longRunningTaskWithSnackbar, refreshSingleFileSymbolicLinks, walk, walkAll } from "./file.ts";
 
 enum MultipleDownloadOption {
@@ -51,6 +52,54 @@ export function downloadFiles(index: number, files: FileResponse[]): AppThunk {
   };
 }
 
+export function downloadAllFiles(index: number): AppThunk {
+  return async (dispatch, getState) => {
+    const fm = getState().fileManager[index];
+    const uri = fm.pure_path;
+    if (!uri) {
+      return;
+    }
+
+    // Fetch all files in the current folder, bypassing pagination
+    const allFiles: FileResponse[] = [];
+    let nextToken: string | undefined = undefined;
+    let page: number | undefined = undefined;
+    while (true) {
+      const res: ListResponse = await dispatch(
+        getFileList({
+          uri,
+          next_page_token: nextToken,
+          page,
+          page_size: 1000,
+        }),
+      );
+      allFiles.push(...res.files);
+      if (res.pagination.total_items) {
+        page = (page ?? 0) + 1;
+      } else if (res.pagination.next_token) {
+        nextToken = res.pagination.next_token;
+      }
+
+      const pageSize = res.pagination?.page_size;
+      const totalPages = Math.ceil(
+        (res.pagination.total_items ?? 1) / (pageSize && pageSize > 0 ? pageSize : MinPageSize),
+      );
+      const usePagination = totalPages > 1;
+      const loadMore = nextToken || (usePagination && (page ?? 0) < totalPages);
+
+      if (!loadMore) {
+        break;
+      }
+    }
+
+    if (allFiles.length === 0) {
+      return;
+    }
+
+    await dispatch(downloadMultipleFiles(allFiles));
+  };
+}
+
 export function downloadMultipleFiles(files: FileResponse[]): AppThunk {
   return async (dispatch, _getState) => {
     // Prepare download options
@@ -68,11 +117,13 @@ export function downloadMultipleFiles(files: FileResponse[]): AppThunk {
       options.push(MultipleDownloadOption.Backend);
     }
 
+    const totalSize = files.reduce((sum, f) => sum + (f.size || 0), 0);
+
     let finalOption = options[0];
     if (options.length > 1) {
       try {
         finalOption = (await dispatch(
-          selectOption(getDownloadSelectOption(options), "fileManager.selectArchiveMethod"),
+          selectOption(getDownloadSelectOption(options, totalSize), "fileManager.selectArchiveMethod"),
         )) as MultipleDownloadOption;
       } catch (e) {
         // User cancel selection
@@ -554,7 +605,10 @@ export function downloadSingleFile(file: FileResponse, preferredEntity?: string)
   };
 }
 
-const getDownloadSelectOption = (options: MultipleDownloadOption[]): DialogSelectOption[] => {
+const BROWSER_ARCHIVE_SIZE_LIMIT = 4 * 1024 * 1024 * 1024; // 4 GB
+
+const getDownloadSelectOption = (options: MultipleDownloadOption[], totalSize: number): DialogSelectOption[] => {
+  const exceedsLimit = totalSize > BROWSER_ARCHIVE_SIZE_LIMIT;
   return options.map((option): DialogSelectOption => {
     switch (option) {
       case MultipleDownloadOption.Backend:
@@ -573,7 +627,13 @@ const getDownloadSelectOption = (options: MultipleDownloadOption[]): DialogSelec
         return {
           value: MultipleDownloadOption.StreamSaver,
           name: i18next.t("fileManager.browserBatchDownload"),
-          description: i18next.t("fileManager.browserBatchDownloadDescription"),
+          description: exceedsLimit
+            ? i18next.t("fileManager.browserBatchDownloadSizeExceeded", {
+                size: sizeToString(totalSize),
+                defaultValue: "Total size {{size}} exceeds the 4 GB browser archive limit",
+              })
+            : i18next.t("fileManager.browserBatchDownloadDescription"),
+          disabled: exceedsLimit,
         };
     }
   });