WiP

src/files-card-body.tsx

@@ -224,6 +224,31 @@ export const FilesCardBody = ({
             }
         };
 
+        const handleDragEnter = (event: DragEvent) => {
+            event.preventDefault();
+            event.stopPropagation();
+            folderViewElem.classList.add("files-drag-hover");
+        };
+
+        const handleDragLeave = (event: DragEvent) => {
+            event.preventDefault();
+            event.stopPropagation();
+            folderViewElem.classList.remove("files-drag-hover");
+        };
+
+        const handleDrop = (event: DragEvent) => {
+            cockpit.assert(event.dataTransfer !== null, "dataTransfer cannot be null");
+            dispatchEvent(new CustomEvent('files-drop', { detail: event.dataTransfer.files }));
+            console.log("drop", event.dataTransfer.files);
+            event.preventDefault();
+            event.stopPropagation();
+        };
+
+        const handleDragOver = (event: DragEvent) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+
         const onKeyboardNav = (e: KeyboardEvent) => {
             if (e.key === "ArrowRight") {
                 setSelected(_selected => {
@@ -273,6 +298,10 @@ export const FilesCardBody = ({
             folderViewElem.addEventListener("click", handleClick);
             folderViewElem.addEventListener("dblclick", handleDoubleClick);
             folderViewElem.addEventListener("contextmenu", handleContextMenu);
+            folderViewElem.addEventListener("dragenter", handleDragEnter, false);
+            folderViewElem.addEventListener("dragleave", handleDragLeave, false);
+            folderViewElem.addEventListener("dragover", handleDragOver, false);
+            folderViewElem.addEventListener("drop", handleDrop, false);
         }
 
         if (!isMounted.current && !dialogs.isActive()) {
@@ -288,6 +317,10 @@ export const FilesCardBody = ({
                 folderViewElem.removeEventListener("click", handleClick);
                 folderViewElem.removeEventListener("dblclick", handleDoubleClick);
                 folderViewElem.removeEventListener("contextmenu", handleContextMenu);
+                folderViewElem.removeEventListener("dragenter", handleDragEnter);
+                folderViewElem.removeEventListener("dragover", handleDragOver);
+                folderViewElem.removeEventListener("dragleave", handleDragLeave);
+                folderViewElem.removeEventListener("drop", handleDrop);
             }
         };
     }, [

src/upload-button.tsx

@@ -17,7 +17,7 @@
  * along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 
 import { AlertVariant } from "@patternfly/react-core/dist/esm/components/Alert";
 import { Button } from "@patternfly/react-core/dist/esm/components/Button";
@@ -39,6 +39,7 @@ import { fmt_to_fragments } from "utils";
 import { useFilesContext } from "./app";
 
 import "./upload-button.scss";
+import { useInit } from "hooks";
 
 const _ = cockpit.gettext;
 
@@ -138,6 +139,19 @@ export const UploadButton = ({
     const [uploadedFiles, setUploadedFiles] = useState<{[name: string]:
                                                         {file: File, progress: number, cancel:() => void}}>({});
 
+    const handleFilesDrop = (event: CustomEvent) => {
+        console.log(event);
+        onUpload(event.detail);
+    };
+
+    useInit(() => {
+        console.log('doing the fun');
+        window.addEventListener("files-drop", handleFilesDrop);
+        return () => {
+            window.removeEventListener("files-drop", handleFilesDrop);
+        };
+    });
+
     const handleClick = () => {
         if (ref.current) {
             ref.current.click();
@@ -152,23 +166,24 @@ export const UploadButton = ({
         event.returnValue = true;
     };
 
-    const onUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
-        cockpit.assert(event.target.files, "not an <input type='file'>?");
+    const onUpload = async (files: FileList, event?: React.ChangeEvent<HTMLInputElement>) => {
+        console.log(files);
         cockpit.assert(cwdInfo?.entries, "cwdInfo.entries is undefined");
         let next_progress = 0;
         const toUploadFiles = [];
 
         const resetInput = () => {
         // Reset input field in the case a download was cancelled and has to be re-uploaded
         // https://stackoverflow.com/questions/26634616/filereader-upload-same-file-again-not-working
-            event.target.value = "";
+            if (event)
+                event.target.value = "";
         };
 
         let resolution;
         let replaceAll = false;
         let skipAll = false;
-        for (let i = 0; i < event.target.files.length; i++) {
-            const uploadFile = event.target.files[i];
+        for (let i = 0; i < files.length; i++) {
+            const uploadFile = files[i];
             const file = cwdInfo?.entries[uploadFile.name];
 
             if (replaceAll)
@@ -178,7 +193,7 @@ export const UploadButton = ({
             } else if (file) {
                 try {
                     resolution = await dialogs.run(FileConflictDialog, {
-                        path, file, uploadFile, isMultiUpload: event.target.files.length > 1
+                        path, file, uploadFile, isMultiUpload: files.length > 1
                     });
                 } catch (exc) {
                     resetInput();
@@ -344,7 +359,10 @@ export const UploadButton = ({
               type="file"
               hidden
               multiple
-              onChange={onUpload}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                  cockpit.assert(event?.target.files, "not an <input type='file'>?");
+                  onUpload(event.target.files, event);
+              }}
             />
         </>
     );