fix(web): fix drag upload folder (#1426)

* fix(web): fix drag upload folder * fix(web): fix upload darkmode
labring · Jul 31, 2023 · d223f5f · d223f5f
1 parent 0ce11e7
commit d223f5f
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 22 deletions.
diff --git a/web/src/components/FileUpload/index.tsx b/web/src/components/FileUpload/index.tsx
@@ -6,12 +6,15 @@ import styles from "./index.module.scss";
 
 type UploadType = "file" | "folder";
 
+type TFileItem = {
+  file: File;
+  webkitRelativePath: string;
+};
+
 // drag drop file component
-function FileUpload(props: { onUpload: (files: any) => void }) {
-  const { onUpload = () => {} } = props;
-  // drag state
+function FileUpload(props: { onUpload: (files: any) => void; darkMode: boolean }) {
+  const { onUpload = () => {}, darkMode } = props;
   const [dragActive, setDragActive] = React.useState(false);
-  // ref
   const inputRef = React.useRef<any>(null);
   const { t } = useTranslation();
 
@@ -27,14 +30,50 @@ function FileUpload(props: { onUpload: (files: any) => void }) {
     }
   };
 
-  // triggers when file is dropped
   const handleDrop = function (e: any) {
     e.preventDefault();
-    e.stopPropagation();
     setDragActive(false);
-    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
-      onUpload(e.dataTransfer.files);
+    const dataTransferItemList = e.dataTransfer.items;
+    const fileArray: TFileItem[] = [];
+    const promises = [];
+    for (const dataTransferItem of dataTransferItemList) {
+      const file = dataTransferItem.webkitGetAsEntry();
+      promises.push(handleFile(file, fileArray));
     }
+    Promise.all(promises)
+      .then(() => {
+        onUpload(fileArray);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+
+  const handleFile = function (file: any, fileArray: TFileItem[], webkitRelativePath = "") {
+    return new Promise((resolve, reject) => {
+      if (file.isFile) {
+        file.file(function (f: File) {
+          const newFile = new Blob([f], { type: f.type });
+          const customFile = {
+            file: new File([newFile], f.name, { type: f.type, lastModified: f.lastModified }),
+            webkitRelativePath: webkitRelativePath || f.webkitRelativePath,
+          };
+          fileArray.push(customFile);
+          resolve(null);
+        });
+      } else {
+        const dirReader = file.createReader();
+        dirReader.readEntries(function (entries: any) {
+          const promises = [];
+          for (let i = 0; i < entries.length; i++) {
+            const entry = entries[i];
+            const newPath = webkitRelativePath ? `${webkitRelativePath}/${entry.name}` : entry.name;
+            promises.push(handleFile(entry, fileArray, newPath));
+          }
+          Promise.all(promises).then(resolve).catch(reject);
+        });
+      }
+    });
   };
 
   // triggers when file is selected with click
@@ -72,10 +111,9 @@ function FileUpload(props: { onUpload: (files: any) => void }) {
       />
       <label
         className={clsx({
-          // border-color: #cbd5e1;
-          // background-color: #f8fafc;
           [styles.labelFileUpload]: true,
-          "bg-lafDark-200": dragActive,
+          "bg-grayModern-100": dragActive && !darkMode,
+          "bg-lafDark-300": dragActive && darkMode,
         })}
         htmlFor="input-file-upload"
       >

diff --git a/web/src/pages/app/storages/mods/UploadButton/index.tsx b/web/src/pages/app/storages/mods/UploadButton/index.tsx
@@ -8,8 +8,10 @@ import {
   ModalHeader,
   ModalOverlay,
   Spinner,
+  useColorMode,
   useDisclosure,
 } from "@chakra-ui/react";
+import clsx from "clsx";
 
 import FileUpload from "@/components/FileUpload";
 
@@ -29,6 +31,7 @@ function UploadButton(props: { onUploadSuccess: Function; children: React.ReactE
   const { uploadFile } = useAwsS3();
   const [fileList, setFileList] = React.useState<TFileItem[]>([]);
   const { t } = useTranslation();
+  const darkMode = useColorMode().colorMode === "dark";
   const { onUploadSuccess, children } = props;
   return (
     <div>
@@ -47,18 +50,28 @@ function UploadButton(props: { onUploadSuccess: Function; children: React.ReactE
           <div className="p-6">
             <FileUpload
               onUpload={async (files) => {
-                const newFileList = Array.from(files).map((item: any) => {
-                  return {
-                    fileName: item.webkitRelativePath ? item.webkitRelativePath : item.name,
-                    status: false,
-                  };
-                });
+                const newFileList = Array.from(files).map((item: any) => ({
+                  fileName:
+                    files[0] instanceof File
+                      ? item.webkitRelativePath
+                        ? item.webkitRelativePath.replace(/^[^/]*\//, "")
+                        : item.name
+                      : item.webkitRelativePath
+                      ? item.webkitRelativePath
+                      : item.file.name,
+                  status: false,
+                }));
                 setFileList(newFileList);
                 for (let i = 0; i < files.length; i++) {
-                  const file = files[i];
-                  const fileName = file.webkitRelativePath
-                    ? file.webkitRelativePath.replace(/^[^/]*\//, "")
-                    : file.name;
+                  const file = files[0] instanceof File ? files[i] : files[i].file;
+                  const fileName =
+                    files[0] instanceof File
+                      ? file.webkitRelativePath
+                        ? file.webkitRelativePath.replace(/^[^/]*\//, "")
+                        : file.name
+                      : files[i].webkitRelativePath
+                      ? files[i].webkitRelativePath
+                      : file.name;
                   await uploadFile(currentStorage?.name!, prefix + fileName, file, {
                     contentType: file.type,
                   });
@@ -72,13 +85,17 @@ function UploadButton(props: { onUploadSuccess: Function; children: React.ReactE
                 onClose();
                 showSuccess(t("StoragePanel.Success"));
               }}
+              darkMode={darkMode}
             />
             <div className="mt-2 max-h-40 overflow-auto">
               {fileList.map((item) => {
                 return (
                   <div
                     key={item.fileName}
-                    className="my-2 flex h-10 w-full items-center justify-between px-5 hover:bg-slate-100"
+                    className={clsx(
+                      "my-2 flex h-10 w-full items-center justify-between px-5",
+                      darkMode ? "hover:bg-lafDark-300" : "hover:bg-slate-100",
+                    )}
                   >
                     <span className="text-slate-500">{item.fileName}</span>
                     {item.status ? (