Add drag-n-drop support in FileRenderer

gnmyt · Sep 15, 2024 · d13fd3d · d13fd3d
1 parent be8d32a
commit d13fd3d
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 1 deletion.
diff --git a/client/src/pages/Servers/components/ViewContainer/renderer/FileRenderer/FileRenderer.jsx b/client/src/pages/Servers/components/ViewContainer/renderer/FileRenderer/FileRenderer.jsx
@@ -6,12 +6,16 @@ import FileList from "@/pages/Servers/components/ViewContainer/renderer/FileRend
 import "./styles.sass";
 import CreateFolderDialog from "./components/CreateFolderDialog";
 import FileEditor from "@/pages/Servers/components/ViewContainer/renderer/FileRenderer/components/FileEditor/index.js";
+import Icon from "@mdi/react";
+import { mdiCloudUpload } from "@mdi/js";
 
 const CHUNK_SIZE = 128 * 1024;
 
 export const FileRenderer = ({ session, disconnectFromServer }) => {
     const { sessionToken } = useContext(UserContext);
 
+    const [dragging, setDragging] = useState(false);
+
     const [folderDialogOpen, setFolderDialogOpen] = useState(false);
 
     const [currentFile, setCurrentFile] = useState(null);
@@ -157,12 +161,38 @@ export const FileRenderer = ({ session, disconnectFromServer }) => {
         }
     };
 
+    const handleDrag = async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (e.type === "dragover") setDragging(true);
+
+        if (e.type === "dragleave") setDragging(false);
+
+        if (e.type === "drop") {
+            setDragging(false);
+
+            const files = e.dataTransfer.files;
+            for (let i = 0; i < files.length; i++) await uploadFileChunks(files[i]);
+
+            setUploadProgress(0);
+
+            return false;
+        }
+    }
+
     useEffect(() => {
         listFiles();
     }, [directory]);
 
     return (
-        <div className="file-renderer">
+        <div className="file-renderer" onDragOver={handleDrag} onDragLeave={handleDrag} onDrop={handleDrag}>
+            <div className="drag-overlay" style={{ display: dragging && currentFile === null ? "flex" : "none" }}>
+                <div class="drag-item">
+                    <Icon path={mdiCloudUpload} />
+                    <h2>Drop files to upload</h2>
+                </div>
+            </div>
             {currentFile === null && <div className="file-manager">
                 <CreateFolderDialog open={folderDialogOpen} onclose={() => setFolderDialogOpen(false)}
                                     createFolder={createFolder} />

diff --git a/client/src/pages/Servers/components/ViewContainer/renderer/FileRenderer/styles.sass b/client/src/pages/Servers/components/ViewContainer/renderer/FileRenderer/styles.sass
@@ -2,6 +2,39 @@
 
 .file-renderer
   height: 100%
+  width: 100%
+
+  .drag-overlay
+    position: absolute
+    width: calc(100vw - 23rem)
+    height: calc(100% - 3.5rem)
+    display: flex
+    justify-content: center
+    align-items: center
+    background-color: rgba(0, 0, 0, 0.5)
+    backdrop-filter: blur(0.3rem)
+    color: $white
+    font-size: 1.5rem
+    z-index: 1
+
+    .drag-item
+      padding: 4rem 2rem
+      width: 20rem
+      border: 0.2rem dashed $white
+      border-radius: 0.5rem
+      display: flex
+      flex-direction: column
+      align-items: center
+      gap: 2rem
+
+      h2
+        margin: 0
+        font-weight: 600
+        text-align: center
+
+      svg
+        width: 8rem
+
 
   .file-manager
     height: calc(100% - 0.5rem)