Merge pull request #370 from ONLYOFFICE/bugfix/fix-operations-notifications

Bugfix/fix operations notifications
2021-10-05 12:32:39 +03:00 · 2021-10-05 12:32:39 +03:00 · d0229aa17f
commit d0229aa17f
parent 4f9fddf794 cee2e96e79
11 changed files with 213 additions and 477 deletions
--- a/packages/asc-web-common/api/files/index.js
+++ b/packages/asc-web-common/api/files/index.js
@ -475,11 +475,6 @@ export function downloadFiles(fileIds, folderIds) {
  return request({ method: "put", url: "/files/fileops/bulkdownload", data });
 }

-export function downloadFormatFiles(fileConvertIds, folderIds) {
-  const data = { folderIds, fileConvertIds };
-  return request({ method: "put", url: "/files/fileops/bulkdownload", data });
-}
-
 export function getProgress() {
  return request({ method: "get", url: "/files/fileops" });
 }
--- a/products/ASC.Files/Client/src/HOCs/withContextOptions.js
+++ b/products/ASC.Files/Client/src/HOCs/withContextOptions.js
@ -227,15 +227,8 @@ export default function withContextOptions(WrappedComponent) {
        t,
        deleteItemAction,
      } = this.props;
-      const {
-        id,
-        title,
-        fileExst,
-        contentLength,
-        folderId,
-        providerKey,
-        rootFolderId,
-      } = item;
+      const { id, title, providerKey, rootFolderId, isFolder } = item;
+
      const isRootThirdPartyFolder = providerKey && id === rootFolderId;

      if (isRootThirdPartyFolder) {
@ -251,13 +244,7 @@ export default function withContextOptions(WrappedComponent) {
        successRemoveFolder: t("FolderRemoved"),
      };

-      deleteItemAction(
-        id,
-        folderId,
-        translations,
-        fileExst || contentLength,
-        providerKey
-      );
+      deleteItemAction(id, translations, !isFolder, providerKey);
    };

    onClickShare = () => {
--- a/products/ASC.Files/Client/src/components/dialogs/DeleteDialog/index.js
+++ b/products/ASC.Files/Client/src/components/dialogs/DeleteDialog/index.js
@ -67,7 +67,7 @@ class DeleteDialogComponent extends React.Component {

    if (!selection.length) return;

-    deleteAction(translations, selection).catch((err) => toastr.error(err));
+    deleteAction(translations, selection);
  };

  onUnsubscribe = () => {
--- a/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/index.js
+++ b/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/index.js
@ -9,8 +9,6 @@ import RowContent from "@appserver/components/row-content";
 import RowContainer from "@appserver/components/row-container";
 import { ReactSVG } from "react-svg";
 import { withTranslation } from "react-i18next";
-import { downloadFormatFiles } from "@appserver/common/api/files";
-import { TIMEOUT } from "../../../helpers/constants";
 import DownloadContent from "./DownloadContent";
 import { inject, observer } from "mobx-react";

@ -73,15 +71,8 @@ class DownloadDialogComponent extends React.Component {
    return [files, folders];
  };

-  //TODO: move to actions?
  onDownload = () => {
-    const {
-      //onDownloadProgress,
-      t,
-      getDownloadProgress,
-      setSecondaryProgressBarData,
-      clearSecondaryProgressData,
-    } = this.props;
+    const { t, downloadFiles } = this.props;

    const [fileConvertIds, folderIds] = this.getDownloadItems();

@ -95,29 +86,7 @@ class DownloadDialogComponent extends React.Component {
      window.open(viewUrl, "_self");
      this.onClose();
    } else if (fileConvertIds.length || folderIds.length) {
-      setSecondaryProgressBarData({
-        icon: "file",
-        visible: true,
-        percent: 0,
-        label: t("Translations:ArchivingData"),
-        alert: false,
-      });
-      downloadFormatFiles(fileConvertIds, folderIds)
-        .then((res) => {
-          this.onClose();
-          getDownloadProgress(
-            res[0],
-            t("Translations:ArchivingData")
-          ).catch((err) => toastr.error(err));
-        })
-        .catch((err) => {
-          setSecondaryProgressBarData({
-            visible: true,
-            alert: true,
-          });
-          //toastr.error(err);
-          setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
-        });
+      downloadFiles(fileConvertIds, folderIds, t("Translations:ArchivingData"));
    }
  };

@ -522,40 +491,27 @@ const DownloadDialog = withTranslation([
 ])(DownloadDialogComponent);

 export default inject(
-  ({
-    filesStore,
-    uploadDataStore,
-    formatsStore,
-    dialogsStore,
-    filesActionsStore,
-  }) => {
-    const { secondaryProgressDataStore } = uploadDataStore;
+  ({ filesStore, formatsStore, dialogsStore, filesActionsStore }) => {
    const { sortedFiles } = filesStore;
    const { getIcon, getFolderIcon } = formatsStore.iconFormatsStore;
    const { filesConverts } = formatsStore.docserviceStore;
-    const {
-      setSecondaryProgressBarData,
-      clearSecondaryProgressData,
-    } = secondaryProgressDataStore;

    const {
      downloadDialogVisible: visible,
      setDownloadDialogVisible,
    } = dialogsStore;

-    const { getDownloadProgress } = filesActionsStore;
+    const { downloadFiles } = filesActionsStore;

    return {
      sortedFiles,
      visible,
      filesConverts,

-      setSecondaryProgressBarData,
-      clearSecondaryProgressData,
      getIcon,
      getFolderIcon,
      setDownloadDialogVisible,
-      getDownloadProgress,
+      downloadFiles,
    };
  }
 )(withRouter(observer(DownloadDialog)));
--- a/products/ASC.Files/Client/src/components/dialogs/EmptyTrashDialog/index.js
+++ b/products/ASC.Files/Client/src/components/dialogs/EmptyTrashDialog/index.js
@ -1,13 +1,10 @@
-import React, { useCallback } from "react";
+import React from "react";
 import { withRouter } from "react-router";
 import ModalDialogContainer from "../ModalDialogContainer";
 import Text from "@appserver/components/text";
 import Button from "@appserver/components/button";
 import ModalDialog from "@appserver/components/modal-dialog";
 import { withTranslation } from "react-i18next";
-import { getProgress, emptyTrash } from "@appserver/common/api/files";
-import toastr from "@appserver/components/toast/toastr";
-import { TIMEOUT } from "../../../helpers/constants";
 import { inject, observer } from "mobx-react";

 const EmptyTrashDialogComponent = (props) => {
@ -15,105 +12,18 @@ const EmptyTrashDialogComponent = (props) => {
    visible,
    t,
    tReady,
-    filter,
-    currentFolderId,
-    setSecondaryProgressBarData,
    isLoading,
-    clearSecondaryProgressData,
-    fetchFiles,
    setEmptyTrashDialogVisible,
+    emptyTrash,
  } = props;

  const onClose = () => setEmptyTrashDialogVisible(false);

-  const loopEmptyTrash = useCallback(
-    (id) => {
-      const successMessage = t("SuccessEmptyTrash");
-      getProgress()
-        .then((res) => {
-          const currentProcess = res.find((x) => x.id === id);
-          if (currentProcess && currentProcess.progress !== 100) {
-            const newProgressData = {
-              icon: "trash",
-              visible: true,
-              percent: currentProcess.progress,
-              label: t("Translations:DeleteOperation"),
-              alert: false,
-            };
-            setSecondaryProgressBarData(newProgressData);
-            setTimeout(() => loopEmptyTrash(id), 1000);
-          } else {
-            fetchFiles(currentFolderId, filter)
-              .then(() => {
-                setSecondaryProgressBarData({
-                  icon: "trash",
-                  visible: true,
-                  percent: 100,
-                  label: t("Translations:DeleteOperation"),
-                  alert: false,
-                });
-                setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
-                toastr.success(successMessage);
-              })
-              .catch((err) => {
-                setSecondaryProgressBarData({
-                  visible: true,
-                  alert: true,
-                });
-                //toastr.error(err);
-                setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
-              });
-          }
-        })
-        .catch((err) => {
-          setSecondaryProgressBarData({
-            visible: true,
-            alert: true,
-          });
-          //toastr.error(err);
-          setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
-        });
-    },
-    [
-      t,
-      currentFolderId,
-      filter,
-      setSecondaryProgressBarData,
-      clearSecondaryProgressData,
-      fetchFiles,
-    ]
-  );
-
-  const onEmptyTrash = useCallback(() => {
-    const newProgressData = {
-      icon: "trash",
-      visible: true,
-      percent: 0,
-      label: t("Translations:DeleteOperation"),
-      alert: false,
-    };
-    setSecondaryProgressBarData(newProgressData);
+  const onEmptyTrash = () => {
    onClose();
-    emptyTrash()
-      .then((res) => {
-        const id = res[0] && res[0].id ? res[0].id : null;
-        loopEmptyTrash(id);
-      })
-      .catch((err) => {
-        setSecondaryProgressBarData({
-          visible: true,
-          alert: true,
-        });
-        //toastr.error(err);
-        setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
-      });
-  }, [
-    onClose,
-    loopEmptyTrash,
-    setSecondaryProgressBarData,
-    t,
-    clearSecondaryProgressData,
-  ]);
+    const translations = { deleteOperation: t("Translations:DeleteOperation") };
+    emptyTrash(translations);
+  };

  return (
    <ModalDialogContainer
@ -153,30 +63,22 @@ const EmptyTrashDialog = withTranslation([
  "Translations",
 ])(EmptyTrashDialogComponent);

-export default inject(
-  ({ filesStore, uploadDataStore, selectedFolderStore, dialogsStore }) => {
-    const { secondaryProgressDataStore } = uploadDataStore;
-    const { fetchFiles, filter, isLoading } = filesStore;
-    const {
-      setSecondaryProgressBarData,
-      clearSecondaryProgressData,
-    } = secondaryProgressDataStore;
+export default inject(({ filesStore, filesActionsStore, dialogsStore }) => {
+  const { fetchFiles, filter, isLoading } = filesStore;
+  const { emptyTrash } = filesActionsStore;

-    const {
-      emptyTrashDialogVisible: visible,
-      setEmptyTrashDialogVisible,
-    } = dialogsStore;
+  const {
+    emptyTrashDialogVisible: visible,
+    setEmptyTrashDialogVisible,
+  } = dialogsStore;

-    return {
-      currentFolderId: selectedFolderStore.id,
-      isLoading,
-      filter,
-      visible,
+  return {
+    isLoading,
+    filter,
+    visible,

-      fetchFiles,
-      setSecondaryProgressBarData,
-      clearSecondaryProgressData,
-      setEmptyTrashDialogVisible,
-    };
-  }
-)(withRouter(observer(EmptyTrashDialog)));
+    fetchFiles,
+    setEmptyTrashDialogVisible,
+    emptyTrash,
+  };
+})(withRouter(observer(EmptyTrashDialog)));
--- a/products/ASC.Files/Client/src/components/panels/OperationsPanel/index.js
+++ b/products/ASC.Files/Client/src/components/panels/OperationsPanel/index.js
@ -25,7 +25,6 @@ const OperationsPanelComponent = (props) => {
    setMoveToPanelVisible,
    checkOperationConflict,
    setThirdPartyMoveDialogVisible,
-    setBufferSelection,
  } = props;

  const zIndex = 310;
@ -34,7 +33,6 @@ const OperationsPanelComponent = (props) => {
  const expandedKeys = props.expandedKeys.map((item) => item.toString());

  const onClose = () => {
-    !provider && setBufferSelection(null);
    isCopy ? setCopyPanelVisible(false) : setMoveToPanelVisible(false);
    setExpandedPanelKeys(null);
  };
@ -142,12 +140,7 @@ export default inject(
    dialogsStore,
    filesActionsStore,
  }) => {
-    const {
-      filter,
-      selection,
-      bufferSelection,
-      setBufferSelection,
-    } = filesStore;
+    const { filter, selection, bufferSelection } = filesStore;
    const {
      isRecycleBinFolder,
      operationsFolders,
@ -187,7 +180,6 @@ export default inject(
      setThirdPartyMoveDialogVisible,
      checkOperationConflict,
      setExpandedPanelKeys,
-      setBufferSelection,
    };
  }
 )(withRouter(observer(OperationsPanel)));
--- a/products/ASC.Files/Client/src/pages/Home/MediaViewer/index.js
+++ b/products/ASC.Files/Client/src/pages/Home/MediaViewer/index.js
@ -20,7 +20,6 @@ const FilesMediaViewer = (props) => {
    mediaViewerImageFormats,
    location,
    setRemoveMediaItem,
-    selectedFolderId,
    userAccess,
    deleteDialogVisible,
    previewFile,
@ -73,13 +72,7 @@ const FilesMediaViewer = (props) => {
      let file = files.find((file) => file.id === id);
      if (file) {
        setRemoveMediaItem(file);
-        deleteItemAction(
-          file.id,
-          selectedFolderId,
-          translations,
-          true,
-          file.providerKey
-        );
+        deleteItemAction(file.id, translations, true, file.providerKey);
      }
    }
  };
@ -141,7 +134,6 @@ export default inject(
    filesActionsStore,
    formatsStore,
    dialogsStore,
-    selectedFolderStore,
    treeFoldersStore,
  }) => {
    const {
@ -174,7 +166,6 @@ export default inject(
      mediaViewerMediaFormats: media,
      setRemoveMediaItem: dialogsStore.setRemoveMediaItem,
      deleteDialogVisible: dialogsStore.deleteDialogVisible,
-      selectedFolderId: selectedFolderStore.id,
      fetchFiles,
      previewFile,
      setIsLoading,
--- a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js
+++ b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js
@ -237,7 +237,7 @@ class SectionHeaderContent extends React.Component {
        deleteSelectedElem: t("Translations:DeleteSelectedElem"),
      };

-      deleteAction(translations).catch((err) => toastr.error(err));
+      deleteAction(translations);
    }
  };

--- a/products/ASC.Files/Client/src/store/FilesActionsStore.js
+++ b/products/ASC.Files/Client/src/store/FilesActionsStore.js
@ -2,7 +2,6 @@ import { makeAutoObservable } from "mobx";

 import {
  removeFiles,
-  getProgress,
  deleteFile,
  deleteFolder,
  finalizeVersion,
@ -12,6 +11,7 @@ import {
  checkFileConflicts,
  removeShareFiles,
  getSubfolders,
+  emptyTrash,
 } from "@appserver/common/api/files";
 import { ConflictResolveType, FileAction } from "@appserver/common/constants";
 import { TIMEOUT } from "../helpers/constants";
@ -56,7 +56,18 @@ class FilesActionStore {
    }
  };

-  deleteAction = (translations, newSelection = null) => {
+  updateCurrentFolder = () => {
+    const {
+      clearSecondaryProgressData,
+    } = this.uploadDataStore.secondaryProgressDataStore;
+
+    const { filter, fetchFiles } = this.filesStore;
+    fetchFiles(this.selectedFolderStore.id, filter, true, true).finally(() =>
+      setTimeout(() => clearSecondaryProgressData(), TIMEOUT)
+    );
+  };
+
+  deleteAction = async (translations, newSelection = null) => {
    const { isRecycleBinFolder, isPrivacyFolder } = this.treeFoldersStore;

    const selection = newSelection ? newSelection : this.filesStore.selection;
@ -66,6 +77,14 @@ class FilesActionStore {
      clearSecondaryProgressData,
    } = this.uploadDataStore.secondaryProgressDataStore;

+    setSecondaryProgressBarData({
+      icon: "trash",
+      visible: true,
+      percent: 0,
+      label: translations.deleteOperation,
+      alert: false,
+    });
+
    const deleteAfter = false; //Delete after finished TODO: get from settings
    const immediately = isRecycleBinFolder || isPrivacyFolder ? true : false; //Don't move to the Recycle Bin

@ -84,151 +103,108 @@ class FilesActionStore {

    if (folderIds.length || fileIds.length) {
      this.isMediaOpen();
-      return removeFiles(folderIds, fileIds, deleteAfter, immediately)
-        .then((res) => {
-          const id = res[0] && res[0].id ? res[0].id : null;
-          const currentProcess = res.find((x) => x.id === id);
-          setSecondaryProgressBarData({
-            icon: "trash",
-            visible: true,
-            label: translations.deleteOperation,
-            percent: currentProcess.progress,
-            alert: false,
-          });

-          this.loopDeleteOperation(id, translations);
-        })
-        .catch((err) => {
-          setSecondaryProgressBarData({
-            visible: true,
-            alert: true,
-          });
-          setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
+      try {
+        await removeFiles(folderIds, fileIds, deleteAfter, immediately).then(
+          async (res) => {
+            const data = res[0] ? res[0] : null;
+            const pbData = {
+              icon: "trash",
+              label: translations.deleteOperation,
+            };
+            await this.uploadDataStore.loopFilesOperations(data, pbData);
+            this.updateCurrentFolder();
+          }
+        );
+      } catch (err) {
+        setSecondaryProgressBarData({
+          visible: true,
+          alert: true,
        });
+        setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
+        return toastr.error(err.message ? err.message : err);
+      }
    }
  };

-  loopDeleteOperation = (id, translations) => {
-    const { filter, fetchFiles } = this.filesStore;
-    const { isRecycleBinFolder, setTreeFolders } = this.treeFoldersStore;
+  emptyTrash = async (translations) => {
    const {
      setSecondaryProgressBarData,
      clearSecondaryProgressData,
    } = this.uploadDataStore.secondaryProgressDataStore;

-    const successMessage = isRecycleBinFolder
-      ? translations.deleteFromTrash
-      : translations.deleteSelectedElem;
+    setSecondaryProgressBarData({
+      icon: "trash",
+      visible: true,
+      percent: 0,
+      label: translations.deleteOperation,
+      alert: false,
+    });

-    getProgress()
-      .then((res) => {
-        const currentProcess = res.find((x) => x.id === id);
-        if (currentProcess && currentProcess.progress !== 100) {
-          setSecondaryProgressBarData({
-            icon: "trash",
-            percent: currentProcess.progress,
-            label: translations.deleteOperation,
-            visible: true,
-            alert: false,
-          });
-          setTimeout(() => this.loopDeleteOperation(id, translations), 1000);
-        } else {
-          setSecondaryProgressBarData({
-            icon: "trash",
-            percent: 100,
-            label: translations.deleteOperation,
-            visible: true,
-            alert: false,
-          });
-          setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
-          fetchFiles(this.selectedFolderStore.id, filter, true, true);
-        }
-      })
-      .catch((err) => {
-        setSecondaryProgressBarData({
-          visible: true,
-          alert: true,
-        });
-        setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
+    try {
+      await emptyTrash().then(async (res) => {
+        const data = res[0] ? res[0] : null;
+        const pbData = {
+          icon: "trash",
+          label: translations.deleteOperation,
+        };
+        await this.uploadDataStore.loopFilesOperations(data, pbData);
+        this.updateCurrentFolder();
      });
+    } catch (err) {
+      setSecondaryProgressBarData({
+        visible: true,
+        alert: true,
+      });
+      setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
+      return toastr.error(err.message ? err.message : err);
+    }
  };

-  loopFilesOperations = (id, translations) => {
+  downloadFilesOperation = () => {};
+
+  downloadFiles = async (fileConvertIds, folderIds, label) => {
    const {
      setSecondaryProgressBarData,
      clearSecondaryProgressData,
    } = this.uploadDataStore.secondaryProgressDataStore;

-    getProgress()
-      .then((res) => {
-        const currentProcess = res.find((x) => x.id === id);
-        if (currentProcess && currentProcess.progress !== 100) {
-          setSecondaryProgressBarData({
-            icon: "file",
-            percent: currentProcess.progress,
-            label: "", //TODO: add translation if need "MarkAsRead": "Mark all as read",
-            visible: true,
-            alert: false,
-          });
-          setTimeout(() => this.loopFilesOperations(id, translations), 1000);
-        } else {
-          setSecondaryProgressBarData({
-            icon: "file",
-            percent: 100,
-            label: "", //TODO: add translation if need "MarkAsRead": "Mark all as read",
-            visible: true,
-            alert: false,
-          });
-          setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
+    setSecondaryProgressBarData({
+      icon: "file",
+      visible: true,
+      percent: 0,
+      label,
+      alert: false,
+    });
+
+    try {
+      await downloadFiles(fileConvertIds, folderIds).then(async (res) => {
+        const data = res[0] ? res[0] : null;
+        const pbData = {
+          icon: "file",
+          label,
+        };
+        const item = await this.uploadDataStore.loopFilesOperations(
+          data,
+          pbData
+        );
+
+        if (item.url) {
+          window.location.href = item.url;
        }
-      })
-      .catch((err) => {
-        setSecondaryProgressBarData({
-          visible: true,
-          alert: true,
-        });
        setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
      });
-  };
-
-  getDownloadProgress = (data, label) => {
-    const {
-      setSecondaryProgressBarData,
-      clearSecondaryProgressData,
-    } = this.uploadDataStore.secondaryProgressDataStore;
-    const url = data.url;
-
-    return getProgress()
-      .then((res) => {
-        const currentItem = res.find((x) => x.id === data.id);
-        if (!url) {
-          setSecondaryProgressBarData({
-            icon: "file",
-            visible: true,
-            percent: currentItem.progress,
-            label,
-            alert: false,
-          });
-          setTimeout(() => this.getDownloadProgress(currentItem, label), 1000);
-        } else {
-          setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
-          return (window.location.href = url);
-        }
-      })
-      .catch((err) => {
-        setSecondaryProgressBarData({
-          visible: true,
-          alert: true,
-        });
-        setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
+    } catch (err) {
+      setSecondaryProgressBarData({
+        visible: true,
+        alert: true,
      });
+      setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
+      return toastr.error(err.message ? err.message : err);
+    }
  };

  downloadAction = (label) => {
-    const {
-      setSecondaryProgressBarData,
-      clearSecondaryProgressData,
-    } = this.uploadDataStore.secondaryProgressDataStore;
    const { bufferSelection } = this.filesStore;

    const selection = this.filesStore.selection.length
@ -254,25 +230,7 @@ class FilesActionStore {
      }
    }

-    setSecondaryProgressBarData({
-      icon: "file",
-      visible: true,
-      percent: 0,
-      label,
-      alert: false,
-    });
-
-    return downloadFiles(fileIds, folderIds)
-      .then((res) => {
-        this.getDownloadProgress(res[0], label);
-      })
-      .catch((err) => {
-        setSecondaryProgressBarData({
-          visible: true,
-          alert: true,
-        });
-        setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
-      });
+    return this.downloadFiles(fileIds, folderIds, label);
  };

  editCompleteAction = async (id, selectedItem, isCancelled = false) => {
@ -327,15 +285,10 @@ class FilesActionStore {
    setBufferSelection(item);
  };

-  deleteItemAction = (
-    itemId,
-    currentFolderId,
-    translations,
-    isFile,
-    isThirdParty
-  ) => {
+  deleteItemAction = async (itemId, translations, isFile, isThirdParty) => {
    const {
      setSecondaryProgressBarData,
+      clearSecondaryProgressData,
    } = this.uploadDataStore.secondaryProgressDataStore;
    if (
      this.settingsStore.confirmDelete ||
@ -351,33 +304,44 @@ class FilesActionStore {
        label: translations.deleteOperation,
        alert: false,
      });
-      isFile
-        ? this.deleteFileAction(itemId, currentFolderId, translations)
-        : this.deleteFolderAction(itemId, currentFolderId, translations);
-    }
-  };

-  deleteFileAction = (fileId, currentFolderId, translations) => {
-    const {
-      setSecondaryProgressBarData,
-      clearSecondaryProgressData,
-    } = this.uploadDataStore.secondaryProgressDataStore;
-
-    this.isMediaOpen();
-    return deleteFile(fileId)
-      .then((res) => {
-        const id = res[0] && res[0].id ? res[0].id : null;
-        this.loopDeleteProgress(id, currentFolderId, false, translations);
-      })
-      .then(() => toastr.success(translations.successRemoveFile))
-      .catch((err) => {
-        toastr.error(err);
+      try {
+        await this.deleteItemOperation(isFile, itemId, translations);
+      } catch (err) {
        setSecondaryProgressBarData({
          visible: true,
          alert: true,
        });
        setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
-      });
+        return toastr.error(err.message ? err.message : err);
+      }
+    }
+  };
+
+  deleteItemOperation = (isFile, itemId, translations) => {
+    const pbData = {
+      icon: "trash",
+      label: translations.deleteOperation,
+    };
+
+    if (isFile) {
+      this.isMediaOpen();
+      return deleteFile(itemId)
+        .then(async (res) => {
+          const data = res[0] ? res[0] : null;
+          await this.uploadDataStore.loopFilesOperations(data, pbData);
+          this.updateCurrentFolder();
+        })
+        .then(() => toastr.success(translations.successRemoveFile));
+    } else {
+      return deleteFolder(itemId)
+        .then(async (res) => {
+          const data = res[0] ? res[0] : null;
+          await this.uploadDataStore.loopFilesOperations(data, pbData);
+          this.updateCurrentFolder();
+        })
+        .then(() => toastr.success(translations.successRemoveFolder));
+    }
  };

  unsubscribeAction = async (fileIds, folderIds) => {
@ -389,72 +353,6 @@ class FilesActionStore {
      .then(() => fetchFiles(this.selectedFolderStore.id, filter, true, true));
  };

-  deleteFolderAction = (folderId, currentFolderId, translations) => {
-    const {
-      setSecondaryProgressBarData,
-      clearSecondaryProgressData,
-    } = this.uploadDataStore.secondaryProgressDataStore;
-
-    return deleteFolder(folderId, currentFolderId)
-      .then((res) => {
-        const id = res[0] && res[0].id ? res[0].id : null;
-        this.loopDeleteProgress(id, currentFolderId, true, translations);
-      })
-      .then(() => toastr.success(translations.successRemoveFolder))
-      .catch((err) => {
-        toastr.error(err);
-        setSecondaryProgressBarData({
-          visible: true,
-          alert: true,
-        });
-        setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
-      });
-  };
-
-  loopDeleteProgress = (id, folderId, isFolder, translations) => {
-    const { filter, fetchFiles } = this.filesStore;
-    const {
-      setSecondaryProgressBarData,
-      clearSecondaryProgressData,
-    } = this.uploadDataStore.secondaryProgressDataStore;
-
-    getProgress().then((res) => {
-      const deleteProgress = res.find((x) => x.id === id);
-      if (deleteProgress && deleteProgress.progress !== 100) {
-        setSecondaryProgressBarData({
-          icon: "trash",
-          visible: true,
-          percent: deleteProgress.progress,
-          label: translations.deleteOperation,
-          alert: false,
-        });
-        setTimeout(
-          () => this.loopDeleteProgress(id, folderId, isFolder, translations),
-          1000
-        );
-      } else {
-        setSecondaryProgressBarData({
-          icon: "trash",
-          visible: true,
-          percent: 100,
-          label: translations.deleteOperation,
-          alert: false,
-        });
-        fetchFiles(folderId, filter, true, true)
-          .catch((err) => {
-            setSecondaryProgressBarData({
-              visible: true,
-              alert: true,
-            });
-            setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
-          })
-          .finally(() =>
-            setTimeout(() => clearSecondaryProgressData(), TIMEOUT)
-          );
-      }
-    });
-  };
-
  lockFileAction = (id, locked) => {
    const { setFile } = this.filesStore;
    return lockFile(id, locked).then((res) => setFile(res));
@ -587,9 +485,10 @@ class FilesActionStore {
    });

    return markAsRead(folderIds, fileId)
-      .then((res) => {
-        const id = res[0] && res[0].id ? res[0].id : null;
-        this.loopFilesOperations(id);
+      .then(async (res) => {
+        const data = res[0] ? res[0] : null;
+        const pbData = { icon: "file" };
+        await this.uploadDataStore.loopFilesOperations(data, pbData);
      })
      .then(() => item && this.setNewBadgeCount(item))
      .catch((err) => toastr.error(err));
@ -660,7 +559,8 @@ class FilesActionStore {
    try {
      conflicts = await checkFileConflicts(destFolderId, folderIds, fileIds);
    } catch (err) {
-      return toastr.error(err.message);
+      this.filesStore.setBufferSelection(null);
+      return toastr.error(err.message ? err.message : err);
    }

    if (conflicts.length) {
@ -671,6 +571,7 @@ class FilesActionStore {
      try {
        await this.uploadDataStore.itemOperationToFolder(operationData);
      } catch (err) {
+        this.filesStore.setBufferSelection(null);
        return toastr.error(err.message ? err.message : err);
      }
    }
@ -858,6 +759,7 @@ class FilesActionStore {
      });
    return this.convertToArray(itemsCollection);
  };
+
  getPrivacyFolderOption = (itemsCollection, t) => {
    const moveTo = this.getOption("moveTo", t);
    const deleteOption = this.getOption("delete", t);
--- a/products/ASC.Files/Client/src/store/FilesStore.js
+++ b/products/ASC.Files/Client/src/store/FilesStore.js
@ -1388,7 +1388,12 @@ class FilesStore {
  }

  get selectionTitle() {
-    if (this.selection.length === 0) return null;
+    if (this.selection.length === 0) {
+      if (this.bufferSelection) {
+        return this.bufferSelection.title;
+      }
+      return null;
+    }
    return this.selection.find((el) => el.title).title;
  }

--- a/products/ASC.Files/Client/src/store/UploadDataStore.js
+++ b/products/ASC.Files/Client/src/store/UploadDataStore.js
@ -767,7 +767,10 @@ class UploadDataStore {
        if (res[0]?.error) return Promise.reject(res[0].error);

        const data = res[0] ? res[0] : null;
-        return this.loopFilesOperations(data, destFolderId, true);
+        const pbData = { icon: "duplicate" };
+        return this.loopFilesOperations(data, pbData).then(() =>
+          this.moveToCopyTo(destFolderId, pbData, true)
+        );
      })
      .catch((err) => {
        setSecondaryProgressBarData({
@ -802,7 +805,10 @@ class UploadDataStore {
    )
      .then((res) => {
        const data = res[0] ? res[0] : null;
-        return this.loopFilesOperations(data, destFolderId, false);
+        const pbData = { icon: "move" };
+        return this.loopFilesOperations(data, pbData).then(() =>
+          this.moveToCopyTo(destFolderId, pbData, false)
+        );
      })
      .catch((err) => {
        setSecondaryProgressBarData({
@ -853,9 +859,8 @@ class UploadDataStore {
        );
  };

-  loopFilesOperations = async (data, destFolderId, isCopy) => {
+  loopFilesOperations = async (data, pbData) => {
    const label = this.secondaryProgressDataStore.label;
-    const treeFolders = this.treeFoldersStore.treeFolders;

    const {
      clearSecondaryProgressData,
@ -869,14 +874,17 @@ class UploadDataStore {
      return;
    }

+    let operationItem = null;
+
    while (progress !== 100) {
      await this.getOperationProgress(data.id)
        .then((item) => {
+          operationItem = item;
          progress = item ? item.progress : 100;

          setSecondaryProgressBarData({
-            icon: isCopy ? "duplicate" : "move",
-            label,
+            icon: pbData.icon,
+            label: pbData.label || label,
            percent: progress,
            visible: true,
            alert: false,
@ -884,14 +892,17 @@ class UploadDataStore {
        })
        .catch((err) => Promise.reject(err));
    }
+    return Promise.resolve(operationItem);
+  };

-    setSecondaryProgressBarData({
-      icon: isCopy ? "duplicate" : "move",
+  moveToCopyTo = (destFolderId, pbData, isCopy) => {
+    const { treeFolders, setTreeFolders } = this.treeFoldersStore;
+    const { fetchFiles, filter } = this.filesStore;
+    const {
+      clearSecondaryProgressData,
+      setSecondaryProgressBarData,
      label,
-      percent: 100,
-      visible: true,
-      alert: false,
-    });
+    } = this.secondaryProgressDataStore;

    getFolder(destFolderId).then((data) => {
      let newTreeFolders = treeFolders;
@ -901,39 +912,34 @@ class UploadDataStore {
      loopTreeFolders(path, newTreeFolders, folders, foldersCount);

      if (!isCopy || destFolderId === this.selectedFolderStore.id) {
-        this.filesStore
-          .fetchFiles(
-            this.selectedFolderStore.id,
-            this.filesStore.filter,
-            true,
-            true
-          )
-          .finally(() => {
+        fetchFiles(this.selectedFolderStore.id, filter, true, true).finally(
+          () => {
            setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
-          });
+          }
+        );
      } else {
        setSecondaryProgressBarData({
-          icon: "duplicate",
-          label,
+          icon: pbData.icon,
+          label: pbData.label || label,
          percent: 100,
          visible: true,
          alert: false,
        });

        setTimeout(() => clearSecondaryProgressData(), TIMEOUT);
-        this.treeFoldersStore.setTreeFolders(newTreeFolders);
+        setTreeFolders(newTreeFolders);
      }
    });
  };

  getOperationProgress = async (id) => {
    const promise = new Promise((resolve, reject) => {
-      setTimeout(() => {
+      setTimeout(async () => {
        try {
-          getProgress().then((res) => {
+          await getProgress().then((res) => {
            const currentItem = res.find((x) => x.id === id);
            if (currentItem?.error) {
-              return reject(currentItem.error);
+              reject(currentItem.error);
            }
            resolve(currentItem);
          });