Fix Bug 61899 - Files.Uploads. Added saving of uploaded folder after renaming

packages/client/src/HOCs/withFileActions.js

@@ -67,16 +67,9 @@ export default function withFileActions(WrappedFileItem) {
 
       dragging && setDragging(false);
 
-      const emptyFolders = files.filter((f) => f.isEmptyDirectory);
-
-      if (emptyFolders.length > 0) {
-        uploadEmptyFolders(emptyFolders, uploadToFolder).then(() => {
-          const onlyFiles = files.filter((f) => !f.isEmptyDirectory);
-          if (onlyFiles.length > 0) startUpload(onlyFiles, uploadToFolder, t);
-        });
-      } else {
-        startUpload(files, uploadToFolder, t);
-      }
+      uploadEmptyFolders(files, uploadToFolder).then((f) => {
+        if (f.length > 0) startUpload(f, null, t);
+      });
     };
 
     onDrop = (items) => {

packages/client/src/components/Article/Body/Items.js

@@ -86,16 +86,10 @@ const Item = ({
   const onDropZoneUpload = React.useCallback(
     (files, uploadToFolder) => {
       dragging && setDragging(false);
-      const emptyFolders = files.filter((f) => f.isEmptyDirectory);
 
-      if (emptyFolders.length > 0) {
-        uploadEmptyFolders(emptyFolders, uploadToFolder).then(() => {
-          const onlyFiles = files.filter((f) => !f.isEmptyDirectory);
-          if (onlyFiles.length > 0) startUpload(onlyFiles, uploadToFolder, t);
-        });
-      } else {
-        startUpload(files, uploadToFolder, t);
-      }
+      uploadEmptyFolders(files, uploadToFolder).then((f) => {
+        if (f.length > 0) startUpload(f, null, t);
+      });
     },
     [t, dragging, setDragging, startUpload, uploadEmptyFolders],
   );

packages/client/src/components/Article/MainButton/index.js

@@ -70,6 +70,7 @@ import { resendInvitesAgain } from "@docspace/shared/api/people";
 import { getCorrectFourValuesStyle } from "@docspace/shared/utils";
 import { ArticleButtonLoader } from "@docspace/shared/skeletons/article";
 import { isMobile, isTablet } from "react-device-detect";
+import getFilesFromEvent from "@docspace/shared/components/drag-and-drop/get-files-from-event";
 
 const StyledButton = styled(Button)`
   font-weight: 700;
@@ -180,6 +181,7 @@ const ArticleMainButtonContent = (props) => {
 
     parentRoomType,
     isFolder,
+    uploadEmptyFolders,
   } = props;
 
   const navigate = useNavigate();
@@ -239,8 +241,12 @@ const ArticleMainButtonContent = (props) => {
   );
 
   const onFileChange = React.useCallback(
-    (e) => {
-      startUpload(e.target.files, null, t);
+    async (e) => {
+      const files = await getFilesFromEvent(e);
+
+      uploadEmptyFolders(files).then((f) => {
+        if (f.length > 0) startUpload(f, null, t);
+      });
     },
     [startUpload, t],
   );
@@ -249,7 +255,7 @@ const ArticleMainButtonContent = (props) => {
     if (isPrivacy) {
       encryptionUploadDialog((encryptedFile, encrypted) => {
         encryptedFile.encrypted = encrypted;
-        startUpload([encryptedFile], null, t);
+        startUpload([encryptedFile], null, t); // TODO: uploadEmptyFolders
       });
     } else {
       inputFilesElement.current.click();
@@ -901,6 +907,7 @@ export default inject(
     versionHistoryStore,
     userStore,
     currentTariffStatusStore,
+    filesActionsStore,
   }) => {
     const { showArticleLoader } = clientLoadingStore;
     const { mainButtonMobileVisible } = filesStore;
@@ -945,6 +952,8 @@ export default inject(
 
     const { frameConfig, isFrame } = settingsStore;
 
+    const { uploadEmptyFolders } = filesActionsStore;
+
     return {
       isGracePeriod,
       setInviteUsersWarningDialogVisible,
@@ -997,6 +1006,7 @@ export default inject(
       isFolder,
       selectFileFormRoomDialogVisible,
       setSelectFileFormRoomDialogVisible,
+      uploadEmptyFolders,
     };
   },
 )(

packages/client/src/pages/Home/Hooks/useFiles.js

@@ -118,16 +118,9 @@ const useFiles = ({
 
     if (disableDrag) return;
 
-    const emptyFolders = files.filter((f) => f.isEmptyDirectory);
-
-    if (emptyFolders.length > 0) {
-      uploadEmptyFolders(emptyFolders, uploadToFolder).then(() => {
-        const onlyFiles = files.filter((f) => !f.isEmptyDirectory);
-        if (onlyFiles.length > 0) startUpload(onlyFiles, uploadToFolder, t);
-      });
-    } else {
-      startUpload(files, uploadToFolder, t);
-    }
+    uploadEmptyFolders(files, uploadToFolder).then((f) => {
+      if (f.length > 0) startUpload(f, null, t);
+    });
   };
 
   React.useEffect(() => {

packages/client/src/pages/Home/Section/Header/index.js

@@ -50,6 +50,7 @@ import {
   getCategoryUrl,
 } from "SRC_DIR/helpers/utils";
 import TariffBar from "SRC_DIR/components/TariffBar";
+import getFilesFromEvent from "@docspace/shared/components/drag-and-drop/get-files-from-event";
 
 const StyledContainer = styled.div`
   width: 100%;
@@ -225,6 +226,7 @@ const SectionHeaderContent = (props) => {
     getHeaderOptions,
     setBufferSelection,
     setGroupsBufferSelection,
+    uploadEmptyFolders,
   } = props;
 
   const location = useLocation();
@@ -239,8 +241,12 @@ const SectionHeaderContent = (props) => {
   const isSettingsPage = location.pathname.includes("/settings");
 
   const onFileChange = React.useCallback(
-    (e) => {
-      startUpload(e.target.files, null, t);
+    async (e) => {
+      const files = await getFilesFromEvent(e);
+
+      uploadEmptyFolders(files).then((f) => {
+        if (f.length > 0) startUpload(f, null, t);
+      });
     },
     [startUpload, t],
   );
@@ -639,6 +645,7 @@ export default inject(
       moveToRoomsPage,
       onClickBack,
       moveToPublicRoom,
+      uploadEmptyFolders,
     } = filesActionsStore;
 
     const { setIsVisible, isVisible } = infoPanelStore;
@@ -802,6 +809,7 @@ export default inject(
       getHeaderOptions,
       setBufferSelection,
       setGroupsBufferSelection,
+      uploadEmptyFolders,
     };
   },
 )(

packages/client/src/store/FilesActionsStore.js

@@ -229,17 +229,21 @@ class FilesActionStore {
     let level = { result };
     try {
       folders.forEach((folder) => {
-        folder.path
-          .split("/")
-          .filter((name) => name !== "")
-          .reduce((r, name, i, a) => {
-            if (!r[name]) {
-              r[name] = { result: [] };
-              r.result.push({ name, children: r[name].result });
-            }
+        const folderPath = folder.path.split("/").filter((name) => name !== "");
 
-            return r[name];
-          }, level);
+        folderPath.reduce((r, name, i, a) => {
+          if (!r[name]) {
+            r[name] = { result: [] };
+            r.result.push({
+              name,
+              children: r[name].result,
+              isFile: folderPath.length - 1 === i && !folder.isEmptyDirectory,
+              file: folder,
+            });
+          }
+
+          return r[name];
+        }, level);
       });
     } catch (e) {
       console.error("convertToTree", e);
@@ -247,28 +251,37 @@ class FilesActionStore {
     return result;
   };
 
-  createFolderTree = async (treeList, parentFolderId) => {
+  createFolderTree = async (treeList, parentFolderId, filesList) => {
     if (!treeList || !treeList.length) return;
 
     for (let i = 0; i < treeList.length; i++) {
       const treeNode = treeList[i];
+      const isFile = treeList[i].isFile;
 
       // console.log(
       //   `createFolderTree parent id = ${parentFolderId} name '${treeNode.name}': `,
       //   treeNode.children
       // );
 
+      if (isFile) {
+        treeList[i].file.parentFolderId = parentFolderId;
+        filesList.push(treeList[i].file);
+        continue;
+      }
+
       const folder = await createFolder(parentFolderId, treeNode.name);
       const parentId = folder.id;
 
       if (treeNode.children.length == 0) continue;
 
-      await this.createFolderTree(treeNode.children, parentId);
+      await this.createFolderTree(treeNode.children, parentId, filesList);
     }
+
+    return treeList;
   };
 
-  uploadEmptyFolders = async (emptyFolders, folderId) => {
-    //console.log("uploadEmptyFolders", emptyFolders, folderId);
+  uploadEmptyFolders = async (files, folderId) => {
+    //console.log("uploadEmptyFolders", files, folderId);
 
     const { secondaryProgressDataStore } = this.uploadDataStore;
     const { setSecondaryProgressBarData, clearSecondaryProgressData } =
@@ -287,12 +300,16 @@ class FilesActionStore {
       operationId,
     });
 
-    const tree = this.convertToTree(emptyFolders);
-    await this.createFolderTree(tree, toFolderId);
+    const tree = this.convertToTree(files);
+
+    const filesList = [];
+    await this.createFolderTree(tree, toFolderId, filesList);
 
     this.updateCurrentFolder(null, [folderId], null, operationId);
 
     setTimeout(() => clearSecondaryProgressData(operationId), TIMEOUT);
+
+    return filesList;
   };
 
   updateFilesAfterDelete = (operationId) => {

packages/client/src/store/HotkeyStore.js

@@ -685,7 +685,6 @@ class HotkeyStore {
   uploadClipboardFiles = async (t, event) => {
     const { uploadEmptyFolders } = this.filesActionsStore;
     const { startUpload } = this.uploadDataStore;
-    const currentFolderId = this.selectedFolderStore.id;
 
     if (this.filesStore.hotkeysClipboard.length) {
       return this.moveFilesFromClipboard(t);
@@ -693,16 +692,9 @@ class HotkeyStore {
 
     const files = await getFilesFromEvent(event);
 
-    const emptyFolders = files.filter((f) => f.isEmptyDirectory);
-
-    if (emptyFolders.length > 0) {
-      uploadEmptyFolders(emptyFolders, currentFolderId).then(() => {
-        const onlyFiles = files.filter((f) => !f.isEmptyDirectory);
-        if (onlyFiles.length > 0) startUpload(onlyFiles, currentFolderId, t);
-      });
-    } else {
-      startUpload(files, currentFolderId, t);
-    }
+    uploadEmptyFolders(files, uploadToFolder).then((f) => {
+      if (f.length > 0) startUpload(f, null, t);
+    });
   };
 
   get countTilesInRow() {

packages/client/src/store/UploadDataStore.js

@@ -773,7 +773,8 @@ class UploadDataStore {
         file: file,
         uniqueId: uniqueid("download_row-key_"),
         fileId: null,
-        toFolderId,
+        // toFolderId,
+        toFolderId: file.parentFolderId,
         action: "upload",
         error: file.size ? null : t("Files:EmptyFile"),
         fileInfo: null,
@@ -1372,7 +1373,7 @@ class UploadDataStore {
       toFolderId,
       fileName,
       fileSize,
-      relativePath,
+      "", // relativePath,
       file.encrypted,
       file.lastModifiedDate,
       createNewIfExist,