diff --git a/src/main/resources/static/js/multitool/PdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js index bd150ac6..45c92be1 100644 --- a/src/main/resources/static/js/multitool/PdfContainer.js +++ b/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) { diff --git a/src/main/resources/static/js/multitool/fileInput.js b/src/main/resources/static/js/multitool/fileInput.js new file mode 100644 index 00000000..1a76bd48 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html index 50fadcca..0b1d7b8a 100644 --- a/src/main/resources/templates/multi-tool.html +++ b/src/main/resources/templates/multi-tool.html @@ -65,7 +65,7 @@ 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 @@ pdfActionsManager, ] ) + addFileInputListener(async (files) => { + pdfContainer.addPdfsFromFiles(files); + }); </script> <style>