haiwen · YangGuoXuan-0503 · Jan 18, 2025 · Jan 18, 2025
diff --git a/frontend/src/components/common/event-bus-type.js b/frontend/src/components/common/event-bus-type.js
@@ -10,4 +10,7 @@ export const EVENT_BUS_TYPE = {
 
   RESTORE_IMAGE: 'restore_image',
   OPEN_MARKDOWN: 'open_markdown',
+
+  // download file
+  DOWNLOAD_FILE: 'download_file',
 };
diff --git a/frontend/src/components/dirent-grid-view/dirent-grid-view.js b/frontend/src/components/dirent-grid-view/dirent-grid-view.js
@@ -14,7 +14,6 @@ import TextTranslation from '../../utils/text-translation';
 import MoveDirentDialog from '../dialog/move-dirent-dialog';
 import CopyDirentDialog from '../dialog/copy-dirent-dialog';
 import ShareDialog from '../dialog/share-dialog';
-import ZipDownloadDialog from '../dialog/zip-download-dialog';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import Rename from '../../components/dialog/rename-dirent';
 import CreateFile from '../dialog/create-file-dialog';
@@ -25,6 +24,7 @@ import imageAPI from '../../utils/image-api';
 import FileAccessLog from '../dialog/file-access-log';
 import { EVENT_BUS_TYPE } from '../common/event-bus-type';
 import EmptyTip from '../empty-tip';
+import { Dirent } from '../../models';
 
 import '../../css/grid-view.css';
 
@@ -81,7 +81,6 @@ class DirentGridView extends React.Component {
       isMoveDialogShow: false,
       isCopyDialogShow: false,
       isEditFileTagShow: false,
-      isZipDialogOpen: false,
       isRenameDialogShow: false,
       isCreateFolderDialogShow: false,
       isCreateFileDialogShow: false,
@@ -467,29 +466,10 @@ class DirentGridView extends React.Component {
     return path === '/' ? path + dirent.name : path + '/' + dirent.name;
   };
 
-  closeZipDialog = () => {
-    this.setState({
-      isZipDialogOpen: false
-    });
-  };
-
   onItemsDownload = () => {
-    let { path, repoID, selectedDirentList } = this.props;
-    if (selectedDirentList.length === 1 && !selectedDirentList[0].isDir()) {
-      let direntPath = Utils.joinPath(path, selectedDirentList[0].name);
-      let url = URLDecorator.getUrl({ type: 'download_file_url', repoID: repoID, filePath: direntPath });
-      location.href = url;
-      return;
-    }
-
-    let selectedDirentNames = selectedDirentList.map(dirent => {
-      return dirent.name;
-    });
-
-    this.setState({
-      isZipDialogOpen: true,
-      downloadItems: selectedDirentNames
-    });
+    const { path, selectedDirentList, eventBus } = this.props;
+    const direntList = selectedDirentList.map(dirent => dirent instanceof Dirent ? dirent.toJson() : dirent);
+    eventBus.dispatch(EVENT_BUS_TYPE.DOWNLOAD_FILE, path, direntList);
   };
 
   onCreateFolderToggle = () => {
@@ -958,16 +938,6 @@ class DirentGridView extends React.Component {
             onAddFolder={this.props.onAddFolder}
           />
         }
-        {this.state.isZipDialogOpen &&
-          <ModalPortal>
-            <ZipDownloadDialog
-              repoID={this.props.repoID}
-              path={this.props.path}
-              target={this.state.downloadItems}
-              toggleDialog={this.closeZipDialog}
-            />
-          </ModalPortal>
-        }
         {this.state.isCopyDialogShow &&
           <CopyDirentDialog
             path={this.props.path}

diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -5,7 +5,7 @@ import MediaQuery from 'react-responsive';
 import { v4 as uuidv4 } from 'uuid';
 import dayjs from 'dayjs';
 import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
-import { gettext, siteRoot, mediaUrl, username, useGoFileserver, fileServerRoot, enableVideoThumbnail, enablePDFThumbnail } from '../../utils/constants';
+import { gettext, siteRoot, mediaUrl, username, enableVideoThumbnail, enablePDFThumbnail } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import URLDecorator from '../../utils/url-decorator';
@@ -16,13 +16,14 @@ import ModalPortal from '../modal-portal';
 import MoveDirentDialog from '../dialog/move-dirent-dialog';
 import CopyDirentDialog from '../dialog/copy-dirent-dialog';
 import ShareDialog from '../dialog/share-dialog';
-import ZipDownloadDialog from '../dialog/zip-download-dialog';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import EditFileTagPopover from '../popover/edit-filetag-popover';
 import LibSubFolderPermissionDialog from '../dialog/lib-sub-folder-permission-dialog';
 import FileAccessLog from '../dialog/file-access-log';
 import toaster from '../toast';
 import FileTag from './file-tag';
+import { EVENT_BUS_TYPE } from '../common/event-bus-type';
+import { Dirent } from '../../models';
 
 import '../../css/dirent-list-item.css';
 
@@ -31,6 +32,7 @@ const propTypes = {
   repoID: PropTypes.string.isRequired,
   isItemFreezed: PropTypes.bool.isRequired,
   dirent: PropTypes.object.isRequired,
+  eventBus: PropTypes.object.isRequired,
   onItemClick: PropTypes.func.isRequired,
   freezeItem: PropTypes.func.isRequired,
   unfreezeItem: PropTypes.func.isRequired,
@@ -84,7 +86,6 @@ class DirentListItem extends React.Component {
       dirent,
       isOperationShow: false,
       highlight: false,
-      isZipDialogOpen: false,
       isFileAccessLogDialogOpen: false,
       isMoveDialogShow: false,
       isCopyDialogShow: false,
@@ -539,36 +540,10 @@ class DirentListItem extends React.Component {
   onItemDownload = (e) => {
     e.preventDefault();
     e.nativeEvent.stopImmediatePropagation();
-    let dirent = this.state.dirent;
-    let repoID = this.props.repoID;
-    let direntPath = this.getDirentPath(dirent);
-    if (dirent.type === 'dir') {
-      if (!useGoFileserver) {
-        this.setState({
-          isZipDialogOpen: true
-        });
-      } else {
-        seafileAPI.zipDownload(repoID, this.props.path, this.state.dirent.name).then((res) => {
-          const zipToken = res.data['zip_token'];
-          location.href = `${fileServerRoot}zip/${zipToken}`;
-        }).catch((error) => {
-          let errorMsg = Utils.getErrorMsg(error);
-          this.setState({
-            isLoading: false,
-            errorMsg: errorMsg
-          });
-        });
-      }
-    } else {
-      let url = URLDecorator.getUrl({ type: 'download_file_url', repoID: repoID, filePath: direntPath });
-      location.href = url;
-    }
-  };
-
-  closeZipDialog = () => {
-    this.setState({
-      isZipDialogOpen: false
-    });
+    const { path, eventBus } = this.props;
+    const { dirent } = this.state;
+    const direntList = dirent instanceof Dirent ? [dirent.toJson()] : [dirent];
+    eventBus.dispatch(EVENT_BUS_TYPE.DOWNLOAD_FILE, path, direntList);
   };
 
   getDirentPath = (dirent) => {
@@ -1027,16 +1002,6 @@ class DirentListItem extends React.Component {
             />
           }
         </MediaQuery>
-        {this.state.isZipDialogOpen &&
-          <ModalPortal>
-            <ZipDownloadDialog
-              repoID={this.props.repoID}
-              path={this.props.path}
-              target={this.state.dirent.name}
-              toggleDialog={this.closeZipDialog}
-            />
-          </ModalPortal>
-        }
         {this.state.isShareDialogShow &&
           <ModalPortal>
             <ShareDialog

diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js
@@ -4,13 +4,11 @@ import classnames from 'classnames';
 import { siteRoot, gettext, username, enableSeadoc, thumbnailSizeForOriginal, thumbnailDefaultSize, fileServerRoot, enableWhiteboard } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import TextTranslation from '../../utils/text-translation';
-import URLDecorator from '../../utils/url-decorator';
 import toaster from '../toast';
 import ModalPortal from '../modal-portal';
 import CreateFile from '../dialog/create-file-dialog';
 import CreateFolder from '../dialog/create-folder-dialog';
 import ImageDialog from '../dialog/image-dialog';
-import ZipDownloadDialog from '../dialog/zip-download-dialog';
 import MoveDirentDialog from '../dialog/move-dirent-dialog';
 import CopyDirentDialog from '../dialog/copy-dirent-dialog';
 import DirentListItem from './dirent-list-item';
@@ -22,6 +20,7 @@ import EmptyTip from '../empty-tip';
 import imageAPI from '../../utils/image-api';
 import { seafileAPI } from '../../utils/seafile-api';
 import FixedWidthTable from '../common/fixed-width-table';
+import { Dirent } from '../../models';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -76,7 +75,6 @@ class DirentListView extends React.Component {
       isCreateFolderDialogShow: false,
       isMoveDialogShow: false,
       isCopyDialogShow: false,
-      isProgressDialogShow: false,
       downloadItems: [],
       isMultipleOperation: true,
       activeDirent: null,
@@ -327,28 +325,9 @@ class DirentListView extends React.Component {
   };
 
   onItemsDownload = () => {
-    let { path, repoID, selectedDirentList } = this.props;
-    if (selectedDirentList.length) {
-      if (selectedDirentList.length === 1 && !selectedDirentList[0].isDir()) {
-        let direntPath = Utils.joinPath(path, selectedDirentList[0].name);
-        let url = URLDecorator.getUrl({ type: 'download_file_url', repoID: repoID, filePath: direntPath });
-        location.href = url;
-        return;
-      }
-
-      let selectedDirentNames = selectedDirentList.map(dirent => {
-        return dirent.name;
-      });
-
-      this.setState({
-        isProgressDialogShow: true,
-        downloadItems: selectedDirentNames
-      });
-    }
-  };
-
-  onCloseZipDownloadDialog = () => {
-    this.setState({ isProgressDialogShow: false });
+    const { path, selectedDirentList, eventBus } = this.props;
+    const direntList = selectedDirentList.map(dirent => dirent instanceof Dirent ? dirent.toJson() : dirent);
+    eventBus.dispatch(EVENT_BUS_TYPE.DOWNLOAD_FILE, path, direntList);
   };
 
   // common contextmenu handle
@@ -790,6 +769,7 @@ class DirentListView extends React.Component {
                   path={this.props.path}
                   repoID={this.props.repoID}
                   currentRepoInfo={this.props.currentRepoInfo}
+                  eventBus={this.props.eventBus}
                   isAdmin={this.isAdmin}
                   isRepoOwner={this.isRepoOwner}
                   repoEncrypted={this.repoEncrypted}
@@ -915,14 +895,6 @@ class DirentListView extends React.Component {
               onAddFolder={this.props.onAddFolder}
             />
           }
-          {this.state.isProgressDialogShow &&
-            <ZipDownloadDialog
-              repoID={this.props.repoID}
-              path={this.props.path}
-              target={this.state.downloadItems}
-              toggleDialog={this.onCloseZipDownloadDialog}
-            />
-          }
         </Fragment>
       </div>
     );

diff --git a/frontend/src/components/toolbar/selected-dirents-toolbar.js b/frontend/src/components/toolbar/selected-dirents-toolbar.js
@@ -1,20 +1,21 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { gettext, siteRoot, name, fileServerRoot, useGoFileserver } from '../../utils/constants';
+import { gettext, siteRoot, name } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import URLDecorator from '../../utils/url-decorator';
 import MoveDirentDialog from '../dialog/move-dirent-dialog';
 import CopyDirentDialog from '../dialog/copy-dirent-dialog';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
-import ZipDownloadDialog from '../dialog/zip-download-dialog';
 import ShareDialog from '../dialog/share-dialog';
 import Rename from '../dialog/rename-dirent';
 import LibSubFolderPermissionDialog from '../dialog/lib-sub-folder-permission-dialog';
 import ModalPortal from '../modal-portal';
 import ItemDropdownMenu from '../dropdown-menu/item-dropdown-menu';
 import toaster from '../toast';
 import FileAccessLog from '../dialog/file-access-log';
+import { Dirent } from '../../models';
+import { EVENT_BUS_TYPE } from '../common/event-bus-type';
 
 import '../../css/selected-dirents-toolbar.css';
 
@@ -25,6 +26,7 @@ const propTypes = {
   repoEncrypted: PropTypes.bool.isRequired,
   repoTags: PropTypes.array.isRequired,
   selectedDirentList: PropTypes.array.isRequired,
+  eventBus: PropTypes.object.isRequired,
   onItemsMove: PropTypes.func.isRequired,
   onItemsCopy: PropTypes.func.isRequired,
   onItemsDelete: PropTypes.func.isRequired,
@@ -47,7 +49,6 @@ class SelectedDirentsToolbar extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isZipDialogOpen: false,
       isFileAccessLogDialogOpen: false,
       isMoveDialogShow: false,
       isCopyDialogShow: false,
@@ -75,38 +76,9 @@ class SelectedDirentsToolbar extends React.Component {
   };
 
   onItemsDownload = () => {
-    let { path, repoID, selectedDirentList } = this.props;
-    if (selectedDirentList.length) {
-      if (selectedDirentList.length === 1 && !selectedDirentList[0].isDir()) {
-        let direntPath = Utils.joinPath(path, selectedDirentList[0].name);
-        let url = URLDecorator.getUrl({ type: 'download_file_url', repoID: repoID, filePath: direntPath });
-        location.href = url;
-        return;
-      }
-      if (!useGoFileserver) {
-        this.setState({
-          isZipDialogOpen: true
-        });
-      } else {
-        const target = this.props.selectedDirentList.map(dirent => dirent.name);
-        seafileAPI.zipDownload(repoID, path, target).then((res) => {
-          const zipToken = res.data['zip_token'];
-          location.href = `${fileServerRoot}zip/${zipToken}`;
-        }).catch((error) => {
-          let errorMsg = Utils.getErrorMsg(error);
-          this.setState({
-            isLoading: false,
-            errorMsg: errorMsg
-          });
-        });
-      }
-    }
-  };
-
-  closeZipDialog = () => {
-    this.setState({
-      isZipDialogOpen: false
-    });
+    const { path, selectedDirentList, eventBus } = this.props;
+    const direntList = selectedDirentList.map(dirent => dirent instanceof Dirent ? dirent.toJson() : dirent);
+    eventBus.dispatch(EVENT_BUS_TYPE.DOWNLOAD_FILE, path, direntList);
   };
 
   checkDuplicatedName = (newName) => {
@@ -432,16 +404,6 @@ class SelectedDirentsToolbar extends React.Component {
             onAddFolder={this.props.onAddFolder}
           />
         }
-        {this.state.isZipDialogOpen &&
-        <ModalPortal>
-          <ZipDownloadDialog
-            repoID={this.props.repoID}
-            path={this.props.path}
-            target={this.props.selectedDirentList.map(dirent => dirent.name)}
-            toggleDialog={this.closeZipDialog}
-          />
-        </ModalPortal>
-        }
         {this.state.showLibContentViewDialogs && (
           <Fragment>
             {this.state.showShareDialog &&