started folder upload changes

src/api/foldersAPI.ts

@@ -97,6 +97,12 @@ export const createFolderAPI = async (name: string, parent?: string) => {
   return response.data;
 };
 
+export const uploadFolderAPI = async (data: FormData, config: any) => {
+  const url = "/folder-service/upload";
+  const response = await axios.post(url, data, config);
+  return response.data;
+};
+
 // PATCH
 
 export const renameFolder = async (folderID: string, name: string) => {

src/components/AddNewDropdown/AddNewDropdown.tsx

@@ -1,5 +1,5 @@
 import { useParams } from "react-router-dom";
-import { createFolderAPI } from "../../api/foldersAPI";
+import { createFolderAPI, uploadFolderAPI } from "../../api/foldersAPI";
 import { useFoldersClient } from "../../hooks/folders";
 import { useClickOutOfBounds } from "../../hooks/utils";
 import { showCreateFolderPopup } from "../../popups/folder";
@@ -17,7 +17,8 @@ const AddNewDropdown: React.FC<AddNewDropdownProps> = (props) => {
   const { invalidateFoldersCache } = useFoldersClient();
   const { wrapperRef } = useClickOutOfBounds(props.closeDropdown);
   const uploadRef: RefObject<HTMLInputElement> = useRef(null);
-  const { uploadFiles } = useUploader();
+  const uploadFolderRef: RefObject<HTMLInputElement> = useRef(null);
+  const { uploadFiles, uploadFolder } = useUploader();
 
   const createFolder = async () => {
     props.closeDropdown();
@@ -41,12 +42,31 @@ const AddNewDropdown: React.FC<AddNewDropdownProps> = (props) => {
     uploadFiles(files);
   };
 
+  const handleFolderUpload = (e: React.FormEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    props.closeDropdown();
+
+    const items = uploadFolderRef.current?.files;
+
+    if (!items) return;
+
+    console.log("items", items);
+
+    uploadFolder(items);
+  };
+
   const triggerFileUpload = () => {
     if (uploadRef.current) {
       uploadRef.current.click();
     }
   };
 
+  const triggerFolderUpload = () => {
+    if (uploadFolderRef.current) {
+      uploadFolderRef.current.click();
+    }
+  };
+
   return (
     <div ref={wrapperRef} className="absolute bottom-0 top-full w-full">
       <input
@@ -56,6 +76,14 @@ const AddNewDropdown: React.FC<AddNewDropdownProps> = (props) => {
         multiple={true}
         onChange={handleUpload}
       />
+      <input
+        className="hidden"
+        ref={uploadFolderRef}
+        type="file"
+        // @ts-ignore
+        webkitdirectory="true"
+        onChange={handleFolderUpload}
+      />
       <ul className="rounded-sm overflow-hidden shadow-lg">
         <li>
           <div>
@@ -77,6 +105,15 @@ const AddNewDropdown: React.FC<AddNewDropdownProps> = (props) => {
             <p className="text-sm">Create Folder</p>
           </a>
         </li>
+        <li>
+          <a
+            className="flex items-center justify-start px-5 py-3 no-underline overflow-hidden text-sm bg-white hover:bg-white-hover"
+            onClick={triggerFolderUpload}
+          >
+            <CreateFolderIcon className="w-5 h-5 mr-2.5 text-primary" />
+            <p className="text-sm">Upload Folder</p>
+          </a>
+        </li>
       </ul>
     </div>
   );

src/hooks/files.ts

@@ -26,6 +26,7 @@ import {
 } from "../utils/cancelTokenManager";
 import { debounce } from "lodash";
 import { addUpload, editUpload } from "../reducers/uploader";
+import { uploadFolderAPI } from "../api/foldersAPI";
 
 export const useFiles = (enabled = true) => {
   const params = useParams();
@@ -279,5 +280,74 @@ export const useUploader = () => {
     }
   };
 
-  return { uploadFiles };
+  const uploadFolder = (files: FileList) => {
+    const data = new FormData();
+
+    const parent = params.id || "/";
+
+    data.append("parent", parent);
+
+    for (let i = 0; i < files.length; i++) {
+      const currentFile = files[i];
+      data.append(
+        "file-data",
+        JSON.stringify({
+          name: currentFile.name,
+          size: currentFile.size,
+          type: currentFile.type,
+          path: currentFile.webkitRelativePath,
+        })
+      );
+    }
+
+    data.append("total-files", files.length.toString());
+
+    for (let i = 0; i < files.length; i++) {
+      const currentFile = files[i];
+      console.log("current file", currentFile.webkitRelativePath);
+      data.append("file", currentFile, "test");
+    }
+
+    const CancelToken = axiosNonInterceptor.CancelToken;
+    const source = CancelToken.source();
+
+    const config = {
+      headers: {
+        "Content-Type": "multipart/form-data",
+        "Transfere-Encoding": "chunked",
+      },
+      onUploadProgress: (progressEvent: ProgressEvent<EventTarget>) => {
+        const currentProgress = Math.round(
+          (progressEvent.loaded / progressEvent.total) * 100
+        );
+
+        console.log("progress", currentProgress);
+      },
+      cancelToken: source.token,
+    };
+
+    uploadFolderAPI(data, config)
+      .then(() => {
+        // dispatch(
+        //   editUpload({
+        //     id: currentID,
+        //     updateData: { completed: true, progress: 100 },
+        //   })
+        // );
+        // removeFileUploadCancelToken(currentID);
+        console.log("uploaded folder");
+      })
+      .catch((e) => {
+        console.log("Error uploading folder", e);
+        // dispatch(
+        //   editUpload({
+        //     id: currentID,
+        //     updateData: { canceled: true },
+        //   })
+        // );
+        // removeFileUploadCancelToken(currentID);
+      });
+  };
+
+  return { uploadFiles, uploadFolder };
 };