drag drop niceness

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

@@ -1,30 +1,83 @@
 document.addEventListener('DOMContentLoaded', function() {
-	const fileInput = document.getElementById(elementID);
-	// Prevent default behavior for drag events
-	['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-		fileInput.addEventListener(eventName, preventDefaults, false);
-	});
 
-	function preventDefaults(e) {
+    let overlay;
-		e.preventDefault();
+    let dragCounter = 0;
-		e.stopPropagation();
-	}
 
-	// Add drop event listener
+    const dragenterListener = function() {
-	fileInput.addEventListener('drop', handleDrop, false);
+        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;
+
+        // Access the file input element and assign dropped files
+        const fileInput = document.getElementById(elementID);
+        fileInput.files = files;
+
+        // Hide and remove the overlay
+        if (overlay) {
+            overlay.remove();
+            overlay = null;
+        }
+
+        // Reset drag counter
+        dragCounter = 0;
+
+        handleFileInputChange(fileInput);
+    };
+
+    // 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);
 
-	function handleDrop(e) {
-		const dt = e.dataTransfer;
-		const files = dt.files;
-		fileInput.files = files;
-		handleFileInputChange(fileInput)
-	}
 });
 
 $("#"+elementID).on("change", function() {
-	handleFileInputChange(this);
+    handleFileInputChange(this);
 });
 
+
 function handleFileInputChange(inputElement) {
 	const files = $(inputElement).get(0).files;
 	const fileNames = Array.from(files).map(f => f.name);