[FEATURE] Drag & Drop Implimented

package.json

@@ -24,9 +24,9 @@
   "devDependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.7",
-    "@mui/material": "^5.15.7",
-    "@tanstack/react-query": "^5.18.1",
+    "@mui/icons-material": "^5.15.9",
+    "@mui/material": "^5.15.9",
+    "@tanstack/react-query": "^5.20.1",
     "@vitejs/plugin-react": "^4.2.1",
     "chonky": "^2.3.2",
     "chonky-icon-fontawesome": "^2.3.2",
@@ -39,11 +39,11 @@
     "react-router-dom": "^6.22.0",
     "react-toastify": "^10.0.4",
     "socket.io-client": "^4.7.4",
-    "vite": "^5.0.12"
+    "vite": "^5.1.1"
   },
   "dependencies": {
     "@kubernetes/client-node": "^0.20.0",
-    "aws-sdk": "^2.1550.0",
+    "aws-sdk": "^2.1555.0",
     "basic-ftp": "^5.0.4",
     "bcrypt": "^5.1.1",
     "chalk": "^5.3.0",
@@ -57,6 +57,7 @@
     "pg-promise": "^11.5.4",
     "postgres-migrations": "^5.3.0",
     "rcon-client": "^4.2.4",
+    "react-dropzone": "^14.2.3",
     "socket.io": "^4.7.4",
     "uuid": "^9.0.1"
   }

src/components/files/MineclusterFiles.jsx

@@ -1,7 +1,6 @@
 import { useState, useEffect, useMemo, useRef } from "react";
 import Box from "@mui/material/Box";
-import { DndProvider } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
+import Dropzone from "react-dropzone";
 
 import {
   FileBrowser,
@@ -101,6 +100,10 @@ export default function MineclusterFiles(props) {
   function uploadFileSelection(e) {
     if (!e.target.files || e.target.files.length === 0) return;
     const { files } = e.target;
+    uploadMultipleFiles(files);
+  }
+
+  function uploadMultipleFiles(files) {
     Promise.all([...files].map((f) => uploadFile(f)))
       .catch((e) => console.log("Error uploading a file", e))
       .then(updateFiles);
@@ -158,29 +161,37 @@ export default function MineclusterFiles(props) {
     if (clickEvent !== "open_files") return; // console.log(clickEvent);
     openItem(payload);
   }
-  return (
-    <Box className="minecluster-files" sx={{ height: "calc(100vh - 6rem)" }}>
-      <input
-        type="file"
-        id="file"
-        ref={inputRef}
-        style={{ display: "none" }}
-        onChange={uploadFileSelection}
-        multiple
-      />
-      <FileBrowser
-        files={files}
-        folderChain={getFolderChain()}
-        onFileAction={fileClick}
-        fileActions={fileActions}
-        darkMode={true}
-      >
-        <FileNavbar />
-        <FileToolbar />
 
-        <FileList />
-        <FileContextMenu />
-      </FileBrowser>
-    </Box>
+  return (
+    <Dropzone onDrop={uploadMultipleFiles}>
+      {({ getRootProps }) => (
+        <Box
+          className="minecluster-files"
+          sx={{ height: "calc(100vh - 6rem)" }}
+          onDrop={getRootProps().onDrop}
+        >
+          <input
+            type="file"
+            id="file"
+            ref={inputRef}
+            style={{ display: "none" }}
+            onChange={uploadFileSelection}
+            multiple
+          />
+          <FileBrowser
+            files={files}
+            folderChain={getFolderChain()}
+            onFileAction={fileClick}
+            fileActions={fileActions}
+            darkMode={true}
+          >
+            <FileNavbar />
+            <FileToolbar />
+            <FileList />
+            <FileContextMenu />
+          </FileBrowser>
+        </Box>
+      )}
+    </Dropzone>
   );
 }