fix(multi-tool): refactor fileInput.js into a class, fix filename variable typos, and update updateFilename logic for dropping files

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

@@ -1,75 +1,94 @@
-import PdfContainer from "./PdfContainer";
+class FileDragManager {
+    overlay;
+    dragCounter;
+    updateFilename;
 
-const addFileDragListener = (callback) => {
-    let overlay;
-    let dragCounter = 0;
+    constructor(cb = null) {
+        this.dragCounter = 0;
+        this.setCallback(cb);
 
-    const dragenterListener = function() {
-        dragCounter++;
-        if (!overlay) {
+        // 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');
-            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);
+            this.overlay = document.createElement('div');
+            this.overlay.style.position = 'fixed';
+            this.overlay.style.top = 0;
+            this.overlay.style.left = 0;
+            this.overlay.style.width = '100%';
+            this.overlay.style.height = '100%';
+            this.overlay.style.background = 'rgba(0, 0, 0, 0.5)';
+            this.overlay.style.color = '#fff';
+            this.overlay.style.zIndex = '1000';
+            this.overlay.style.display = 'flex';
+            this.overlay.style.alignItems = 'center';
+            this.overlay.style.justifyContent = 'center';
+            this.overlay.style.pointerEvents = 'none';
+            this.overlay.innerHTML = '<p>Drop files anywhere to upload</p>';
+            document.getElementById('content-wrap').appendChild(this.overlay);
         }
     };
 
-    const dragleaveListener = function() {
-        dragCounter--;
-        if (dragCounter === 0) {
+    dragleaveListener() {
+        this.dragCounter--;
+        if (this.dragCounter === 0) {
             // Hide and remove the overlay
-            if (overlay) {
-                overlay.remove();
-                overlay = null;
+            if (this.overlay) {
+                this.overlay.remove();
+                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(() => {
             // Hide and remove the overlay
-            if (overlay) {
-                overlay.remove();
-                overlay = null;
+            if (this.overlay) {
+                this.overlay.remove();
+                this.overlay = null;
             }
 
-            // Enable/disable filename input
-            PdfContainer.updateFilenameInput()
+            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;