Merge pull request Stirling-Tools#296 from jordyjordy/multitool-filedrag

add fileInput widget to multiSelect

src/main/resources/static/js/multitool/PdfContainer.js

@@ -10,6 +10,7 @@ class PdfContainer {
         this.pagesContainerWrapper = document.getElementById(wrapperId);
         this.movePageTo = this.movePageTo.bind(this);
         this.addPdfs = this.addPdfs.bind(this);
+        this.addPdfsFromFiles = this.addPdfsFromFiles.bind(this);
         this.rotateElement = this.rotateElement.bind(this);
         this.rotateAll = this.rotateAll.bind(this);
         this.exportPdf = this.exportPdf.bind(this);
@@ -57,22 +58,25 @@ class PdfContainer {
         input.type = 'file';
         input.multiple = true;
         input.setAttribute("accept", "application/pdf");
-
         input.onchange = async(e) => {
             const files = e.target.files;
-            this.fileName = files[0].name;
-            for (var i=0; i < files.length; i++) {
-                await this.addPdfFile(files[i], nextSiblingElement);
-            }
-
-            document.querySelectorAll(".enable-on-file").forEach(element => {
-                element.disabled = false;
-            });
+            this.addPdfsFromFiles(files, nextSiblingElement);
         }
 
         input.click();
     }
 
+    async addPdfsFromFiles(files, nextSiblingElement) {
+        this.fileName = files[0].name;
+        for (var i=0; i < files.length; i++) {
+            await this.addPdfFile(files[i], nextSiblingElement);
+        }
+
+        document.querySelectorAll(".enable-on-file").forEach(element => {
+            element.disabled = false;
+        });
+    }
+
     rotateElement(element, deg) {
         var lastTransform = element.style.rotate;
         if (!lastTransform) {

src/main/resources/static/js/multitool/fileInput.js

@@ -0,0 +1,69 @@
+const addFileDragListener = (callback) => {
+    let overlay;
+    let dragCounter = 0;
+
+    const dragenterListener = function() {
+        dragCounter++;
+        if (!overlay) {
+            // Create and show the overlay
+            overlay = document.createElement('div');
+            overlay.style.position = 'fixed';
+            overlay.style.top = 0;
+            overlay.style.left = 0;
+            overlay.style.width = '100%';
+            overlay.style.height = '100%';
+            overlay.style.background = 'rgba(0, 0, 0, 0.5)';
+            overlay.style.color = '#fff';
+            overlay.style.zIndex = '1000';
+            overlay.style.display = 'flex';
+            overlay.style.alignItems = 'center';
+            overlay.style.justifyContent = 'center';
+            overlay.style.pointerEvents = 'none';
+            overlay.innerHTML = '<p>Drop files anywhere to upload</p>';
+            document.getElementById('content-wrap').appendChild(overlay);
+        }
+    };
+
+    const dragleaveListener = function() {
+        dragCounter--;
+        if (dragCounter === 0) {
+            // Hide and remove the overlay
+            if (overlay) {
+                overlay.remove();
+                overlay = null;
+            }
+        }
+    };
+
+    const dropListener = function(e) {
+
+        const dt = e.dataTransfer;
+        const files = dt.files;
+        callback(files).catch((err) => {
+            console.error(err);
+            //maybe
+        }).finally(() => {
+            if (overlay) {
+                overlay.remove();
+                overlay = null;
+            }
+        });
+    };
+
+    // Prevent default behavior for drag events
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        document.body.addEventListener(eventName, preventDefaults, false);
+    });
+
+    function preventDefaults(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    document.body.addEventListener('dragenter', dragenterListener);
+    document.body.addEventListener('dragleave', dragleaveListener);
+    // Add drop event listener
+    document.body.addEventListener('drop', dropListener);
+}
+
+export default addFileDragListener;

src/main/resources/templates/multi-tool.html

@@ -65,7 +65,7 @@ <h2 th:text="#{multiTool.header}"></h2>
         import scrollDivHorizontally from "./js/multitool/horizontalScroll.js";
         import ImageHighlighter from "./js/multitool/ImageHighlighter.js";
         import PdfActionsManager from './js/multitool/PdfActionsManager.js';
-
+        import addFileInputListener from './js/multitool/fileInput.js';
         // enables drag and drop
         const dragDropManager = new DragDropManager('drag-container', 'pages-container');
         // enables image highlight on click
@@ -86,6 +86,9 @@ <h2 th:text="#{multiTool.header}"></h2>
                 pdfActionsManager,
             ]
         )
+        addFileInputListener(async (files) => {
+            pdfContainer.addPdfsFromFiles(files);
+        });
     </script>
 
     <style>