Merge pull request #719 from dhenry437/fix/multi-tool-filename

Multi-tool bug with dropping files

src/main/resources/static/3rdPartyLicenses.json

@@ -357,22 +357,29 @@
         {
             "moduleName": "org.apache.pdfbox:fontbox",
             "moduleUrl": "https://pdfbox.apache.org",
-            "moduleVersion": "2.0.30",
+            "moduleVersion": "3.0.1",
-            "moduleLicense": "Apache License, Version 2.0",
+            "moduleLicense": "Apache-2.0",
             "moduleLicenseUrl": "https://www.apache.org/licenses/LICENSE-2.0.txt"
         },
         {
             "moduleName": "org.apache.pdfbox:pdfbox",
             "moduleUrl": "https://pdfbox.apache.org",
-            "moduleVersion": "2.0.30",
+            "moduleVersion": "3.0.1",
-            "moduleLicense": "Apache License, Version 2.0",
+            "moduleLicense": "Apache-2.0",
+            "moduleLicenseUrl": "https://www.apache.org/licenses/LICENSE-2.0.txt"
+        },
+        {
+            "moduleName": "org.apache.pdfbox:pdfbox-io",
+            "moduleUrl": "https://pdfbox.apache.org",
+            "moduleVersion": "3.0.1",
+            "moduleLicense": "Apache-2.0",
             "moduleLicenseUrl": "https://www.apache.org/licenses/LICENSE-2.0.txt"
         },
         {
             "moduleName": "org.apache.pdfbox:xmpbox",
             "moduleUrl": "https://pdfbox.apache.org",
-            "moduleVersion": "2.0.30",
+            "moduleVersion": "3.0.1",
-            "moduleLicense": "Apache License, Version 2.0",
+            "moduleLicense": "Apache-2.0",
             "moduleLicenseUrl": "https://www.apache.org/licenses/LICENSE-2.0.txt"
         },
         {
@@ -450,6 +457,12 @@
             "moduleLicense": "BSD 2-Clause License",
             "moduleLicenseUrl": "https://opensource.org/licenses/BSD-2-Clause"
         },
+        {
+            "moduleName": "org.commonmark:commonmark-ext-gfm-tables",
+            "moduleVersion": "0.21.0",
+            "moduleLicense": "BSD 2-Clause License",
+            "moduleLicenseUrl": "https://opensource.org/licenses/BSD-2-Clause"
+        },
         {
             "moduleName": "org.eclipse.angus:angus-activation",
             "moduleUrl": "https://www.eclipse.org",
@@ -506,6 +519,52 @@
             "moduleLicense": "Public Domain",
             "moduleLicenseUrl": "http://repository.jboss.org/licenses/cc0-1.0.txt"
         },
+        {
+            "moduleName": "org.junit.jupiter:junit-jupiter",
+            "moduleUrl": "https://junit.org/junit5/",
+            "moduleVersion": "5.10.1",
+            "moduleLicense": "Eclipse Public License v2.0",
+            "moduleLicenseUrl": "https://www.eclipse.org/legal/epl-v20.html"
+        },
+        {
+            "moduleName": "org.junit.jupiter:junit-jupiter-api",
+            "moduleUrl": "https://junit.org/junit5/",
+            "moduleVersion": "5.10.1",
+            "moduleLicense": "Eclipse Public License v2.0",
+            "moduleLicenseUrl": "https://www.eclipse.org/legal/epl-v20.html"
+        },
+        {
+            "moduleName": "org.junit.jupiter:junit-jupiter-engine",
+            "moduleUrl": "https://junit.org/junit5/",
+            "moduleVersion": "5.10.1",
+            "moduleLicense": "Eclipse Public License v2.0",
+            "moduleLicenseUrl": "https://www.eclipse.org/legal/epl-v20.html"
+        },
+        {
+            "moduleName": "org.junit.jupiter:junit-jupiter-params",
+            "moduleUrl": "https://junit.org/junit5/",
+            "moduleVersion": "5.10.1",
+            "moduleLicense": "Eclipse Public License v2.0",
+            "moduleLicenseUrl": "https://www.eclipse.org/legal/epl-v20.html"
+        },
+        {
+            "moduleName": "org.junit.platform:junit-platform-commons",
+            "moduleUrl": "https://junit.org/junit5/",
+            "moduleVersion": "1.10.1",
+            "moduleLicense": "Eclipse Public License v2.0",
+            "moduleLicenseUrl": "https://www.eclipse.org/legal/epl-v20.html"
+        },
+        {
+            "moduleName": "org.junit.platform:junit-platform-engine",
+            "moduleUrl": "https://junit.org/junit5/",
+            "moduleVersion": "1.10.1",
+            "moduleLicense": "Eclipse Public License v2.0",
+            "moduleLicenseUrl": "https://www.eclipse.org/legal/epl-v20.html"
+        },
+        {
+            "moduleName": "org.junit:junit-bom",
+            "moduleVersion": "5.10.1"
+        },
         {
             "moduleName": "org.latencyutils:LatencyUtils",
             "moduleUrl": "http://latencyutils.github.io/LatencyUtils/",
@@ -513,6 +572,13 @@
             "moduleLicense": "Public Domain, per Creative Commons CC0",
             "moduleLicenseUrl": "http://creativecommons.org/publicdomain/zero/1.0/"
         },
+        {
+            "moduleName": "org.opentest4j:opentest4j",
+            "moduleUrl": "https://github.com/ota4j-team/opentest4j",
+            "moduleVersion": "1.3.0",
+            "moduleLicense": "The Apache License, Version 2.0",
+            "moduleLicenseUrl": "https://www.apache.org/licenses/LICENSE-2.0.txt"
+        },
         {
             "moduleName": "org.slf4j:jul-to-slf4j",
             "moduleUrl": "http://www.slf4j.org",

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

@@ -26,6 +26,7 @@ class PdfContainer {
                 movePageTo: this.movePageTo,
                 addPdfs: this.addPdfs,
                 rotateElement: this.rotateElement,
+                updateFilename: this.updateFilename
             })
         })
 
@@ -38,7 +39,7 @@ class PdfContainer {
 
         filenameInput.onkeyup = this.updateFilename;
         filenameInput.onkeydown = this.preventIllegalChars;
-        filenameInput.disabled = true;
+        filenameInput.disabled = false;
         filenameInput.innerText = "";
         downloadBtn.disabled = true;
     }
@@ -73,30 +74,9 @@ class PdfContainer {
         input.setAttribute("accept", "application/pdf");
         input.onchange = async(e) => {
             const files = e.target.files;
-            if (files.length > 0) {
-                const filenameInput = document.getElementById('filename-input');
-                const pagesContainer = document.getElementById('pages-container');
-                const downloadBtn = document.getElementById('export-button');
-
-                filenameInput.disabled = false;
-
-                if (pagesContainer.childElementCount === 0) {
-                    filenameInput.value = "";
-                    this.filename = null;
-                    downloadBtn.disabled = true;
-                } else {
-                    this.filename = filenameInput.value;
-                }
-
-                if (this.filename === null || this.filename === undefined) {
-                    filenameInput.value = files[0].name;
-                } else {
-                    filenameInput.value = this.filename;
-                }
-
-            }
 
             this.addPdfsFromFiles(files, nextSiblingElement);
+            this.updateFilename(files ? files[0].name : "");
         }
 
         input.click();
@@ -242,12 +222,12 @@ class PdfContainer {
             }
 
             filenameInput.value = inputArr.join('');
-            this.filename = filenameInput.value;
+            this.fileName = filenameInput.value;
         }
 
         if (!filenameInput.value.includes('.pdf')) {
             filenameInput.value = filenameInput.value + '.pdf';
-            this.filename = filenameInput.value;
+            this.fileName = filenameInput.value;
         }
 
         if (downloadOption === 'sameWindow') {
@@ -263,7 +243,7 @@ class PdfContainer {
             this.downloadLink.href = url;
             // downloadLink.download = this.fileName ? this.fileName : 'managed.pdf';
             // downloadLink.download = this.fileName;
-            this.downloadLink.setAttribute('download', this.filename ? this.fileName : 'managed.pdf');
+            this.downloadLink.setAttribute('download', this.fileName ? this.fileName : 'managed.pdf');
             this.downloadLink.setAttribute('target', '_blank');
             this.downloadLink.onclick = this.setDownloadAttribute;
             this.downloadLink.click();
@@ -271,20 +251,23 @@ class PdfContainer {
     }
 
     setDownloadAttribute() {
-        this.downloadLink.setAttribute("download", this.filename ? this.filename : 'managed.pdf');
+        this.downloadLink.setAttribute("download", this.fileName ? this.fileName : 'managed.pdf');
     }
 
-    updateFilename() {
+    updateFilename(fileName = "") {
-       const filenameInput = document.getElementById('filename-input');
+        const filenameInput = document.getElementById('filename-input');
+        const pagesContainer = document.getElementById('pages-container');
         const downloadBtn = document.getElementById('export-button');
 
-        if (filenameInput.value === "") {
+        downloadBtn.disabled = pagesContainer.childElementCount === 0
-            downloadBtn.disabled = true;
+
-            return;
+        if (!this.fileName) {
+            this.fileName = fileName;
         }
 
-        downloadBtn.disabled = false;
+        if (!filenameInput.value) {
-        this.filename = filenameInput.value;
+            filenameInput.value = this.fileName;
+        }
     }
 
     preventIllegalChars(e) {

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

@@ -1,69 +1,94 @@
-const addFileDragListener = (callback) => {
+class FileDragManager {
-    let overlay;
+    overlay;
-    let dragCounter = 0;
+    dragCounter;
+    updateFilename;
 
-    const dragenterListener = function() {
+    constructor(cb = null) {
-        dragCounter++;
+        this.dragCounter = 0;
-        if (!overlay) {
+        this.setCallback(cb);
+
+        // 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();
+        }
+
+        this.dragenterListener = this.dragenterListener.bind(this);
+        this.dragleaveListener = this.dragleaveListener.bind(this);
+        this.dropListener = this.dropListener.bind(this);
+
+        document.body.addEventListener('dragenter', this.dragenterListener);
+        document.body.addEventListener('dragleave', this.dragleaveListener);
+        // Add drop event listener
+        document.body.addEventListener('drop', this.dropListener);
+    }
+
+    setActions({ updateFilename }) {
+        this.updateFilename = updateFilename;
+    }
+
+    setCallback(cb) {
+        if (cb) {
+            this.callback = cb;
+        } else {
+            this.callback = (files) => console.warn("FileDragManager not set");
+        }
+    }
+
+    dragenterListener() {
+        this.dragCounter++;
+        if (!this.overlay) {
             // Create and show the overlay
-            overlay = document.createElement('div');
+            this.overlay = document.createElement('div');
-            overlay.style.position = 'fixed';
+            this.overlay.style.position = 'fixed';
-            overlay.style.top = 0;
+            this.overlay.style.top = 0;
-            overlay.style.left = 0;
+            this.overlay.style.left = 0;
-            overlay.style.width = '100%';
+            this.overlay.style.width = '100%';
-            overlay.style.height = '100%';
+            this.overlay.style.height = '100%';
-            overlay.style.background = 'rgba(0, 0, 0, 0.5)';
+            this.overlay.style.background = 'rgba(0, 0, 0, 0.5)';
-            overlay.style.color = '#fff';
+            this.overlay.style.color = '#fff';
-            overlay.style.zIndex = '1000';
+            this.overlay.style.zIndex = '1000';
-            overlay.style.display = 'flex';
+            this.overlay.style.display = 'flex';
-            overlay.style.alignItems = 'center';
+            this.overlay.style.alignItems = 'center';
-            overlay.style.justifyContent = 'center';
+            this.overlay.style.justifyContent = 'center';
-            overlay.style.pointerEvents = 'none';
+            this.overlay.style.pointerEvents = 'none';
-            overlay.innerHTML = '<p>Drop files anywhere to upload</p>';
+            this.overlay.innerHTML = '<p>Drop files anywhere to upload</p>';
-            document.getElementById('content-wrap').appendChild(overlay);
+            document.getElementById('content-wrap').appendChild(this.overlay);
         }
     };
 
-    const dragleaveListener = function() {
+    dragleaveListener() {
-        dragCounter--;
+        this.dragCounter--;
-        if (dragCounter === 0) {
+        if (this.dragCounter === 0) {
             // Hide and remove the overlay
-            if (overlay) {
+            if (this.overlay) {
-                overlay.remove();
+                this.overlay.remove();
-                overlay = null;
+                this.overlay = null;
             }
         }
     };
 
-    const dropListener = function(e) {
+    dropListener(e) {
 
         const dt = e.dataTransfer;
         const files = dt.files;
-        callback(files).catch((err) => {
+        this.callback(files).catch((err) => {
             console.error(err);
             //maybe
         }).finally(() => {
-            if (overlay) {
+            // Hide and remove the overlay
-                overlay.remove();
+            if (this.overlay) {
-                overlay = null;
+                this.overlay.remove();
+                this.overlay = null;
             }
+
+            this.updateFilename(files ? files[0].name : "");
         });
     };
-
-    // 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;
+export default FileDragManager;

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

@@ -79,13 +79,14 @@
         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';
+        import FileDragManager from './js/multitool/fileInput.js';
         // enables drag and drop
         const dragDropManager = new DragDropManager('drag-container', 'pages-container');
         // enables image highlight on click
         const imageHighlighter = new ImageHighlighter('image-highlighter');
         // enables the default action buttons on each pdf
         const pdfActionsManager = new PdfActionsManager('pages-container');
+        const fileDragManager = new FileDragManager();
 
         // Scroll the wrapper horizontally
         scrollDivHorizontally('pages-container-wrapper');
@@ -98,11 +99,11 @@
                 dragDropManager,
                 imageHighlighter,
                 pdfActionsManager,
+                fileDragManager
             ]
         )
-        addFileInputListener(async (files) => {
+
-            pdfContainer.addPdfsFromFiles(files);
+        fileDragManager.setCallback(async (files) => pdfContainer.addPdfsFromFiles(files));
-        });
     </script>
 
     <style>