From 574c474804c0b5b6eec3ef8206f8dee5a2b4433c Mon Sep 17 00:00:00 2001
From: reecebrowne <74901996+reecebrowne@users.noreply.github.com>
Date: Tue, 31 Dec 2024 10:44:49 +0000
Subject: [PATCH] Fix file drag and drop (#2575)
# Description
Drag and drop only loading first page.
Closes #(2560)
## Checklist
- [ X] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ X] I have performed a self-review of my own code
- [ X] I have attached images of the change if it is UI based
- [ X] I have commented my code, particularly in hard-to-understand
areas
- [ X] If my code has heavily changed functionality I have updated
relevant docs on [Stirling-PDFs doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
- [ X] My changes generate no new warnings
- [ X] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)
---
.../static/js/multitool/PdfContainer.js | 15 ++++++
.../static/js/multitool/fileInput.js | 48 +++++++++----------
src/main/resources/templates/multi-tool.html | 2 +-
3 files changed, 40 insertions(+), 25 deletions(-)
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;