diff --git a/src/main/resources/static/js/multitool/PdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js index c060203d..61548200 100644 --- a/src/main/resources/static/js/multitool/PdfContainer.js +++ b/src/main/resources/static/js/multitool/PdfContainer.js @@ -168,6 +168,21 @@ class PdfContainer { input.click(); }); } + + async handleDroppedFiles(files, nextSiblingElement = null) { + if (files.length > 0) { + const pages = await this.addFilesFromFiles(files, nextSiblingElement, []); + this.updateFilename(files[0]?.name || 'untitled'); + + const selectAll = document.getElementById('select-pages-container'); + if (selectAll) { + selectAll.classList.remove('hidden'); + } + + return pages; + } + } + async addFilesFromFiles(files, nextSiblingElement, pages) { this.fileName = files[0].name; for (var i = 0; i < files.length; i++) { diff --git a/src/main/resources/static/js/multitool/fileInput.js b/src/main/resources/static/js/multitool/fileInput.js index 9efa8eb2..ec7fa4c1 100644 --- a/src/main/resources/static/js/multitool/fileInput.js +++ b/src/main/resources/static/js/multitool/fileInput.js @@ -8,7 +8,7 @@ class FileDragManager { this.setCallback(cb); // Prevent default behavior for drag events - ["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => { + ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => { document.body.addEventListener(eventName, preventDefaults, false); }); @@ -21,13 +21,13 @@ class FileDragManager { this.dragleaveListener = this.dragleaveListener.bind(this); this.dropListener = this.dropListener.bind(this); - document.body.addEventListener("dragenter", this.dragenterListener); - document.body.addEventListener("dragleave", this.dragleaveListener); + document.body.addEventListener('dragenter', this.dragenterListener); + document.body.addEventListener('dragleave', this.dragleaveListener); // Add drop event listener - document.body.addEventListener("drop", this.dropListener); + document.body.addEventListener('drop', this.dropListener); } - setActions({ updateFilename }) { + setActions({updateFilename}) { this.updateFilename = updateFilename; } @@ -35,7 +35,7 @@ class FileDragManager { if (cb) { this.callback = cb; } else { - this.callback = (files) => console.warn("FileDragManager not set"); + this.callback = (files) => console.warn('FileDragManager not set'); } } @@ -43,21 +43,21 @@ class FileDragManager { this.dragCounter++; if (!this.overlay) { // Create and show the overlay - this.overlay = document.createElement("div"); - this.overlay.style.position = "fixed"; + 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 = "

Drop files anywhere to upload

"; - document.getElementById("content-wrap").appendChild(this.overlay); + 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 = '

Drop files anywhere to upload

'; + document.getElementById('content-wrap').appendChild(this.overlay); } } @@ -87,16 +87,16 @@ class FileDragManager { this.overlay = null; } - this.updateFilename(files ? files[0].name : ""); + this.updateFilename(files ? files[0].name : ''); }); } async addImageFile(file, nextSiblingElement) { - const div = document.createElement("div"); - div.classList.add("page-container"); + const div = document.createElement('div'); + div.classList.add('page-container'); - var img = document.createElement("img"); - img.classList.add("page-image"); + var img = document.createElement('img'); + img.classList.add('page-image'); img.src = URL.createObjectURL(file); div.appendChild(img); diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html index d785c348..d45160f2 100644 --- a/src/main/resources/templates/multi-tool.html +++ b/src/main/resources/templates/multi-tool.html @@ -216,7 +216,7 @@ undoManager ) - fileDragManager.setCallback(async (files) => pdfContainer.addFilesFromFiles(files)); + fileDragManager.setCallback(async (files) => pdfContainer.handleDroppedFiles(files)); document.addEventListener('keydown', function(event) { let targetElementId = event.target.id;