DGNum/Stirling-PDF
15
0
Fork 0
Code Issues 4 Pull requests 1 Projects Releases Packages Wiki Activity

Merge pull request #1204 from t71rs/Deletion-of-Files-using-Merge

Browse source 
User Friendly Merge File Selection
This commit is contained in:
Anthony Stirling 2024-05-21 20:44:47 +01:00 committed by GitHub
commit 4bad105119
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 91 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/main/resources/static/css/fileSelect.css
View file

@ -8,3 +8,7 @@
overflow-y: auto;
white-space: pre-wrap;
}
.duplicate-warning {
color: red;
font-weight: bold;
}

47
src/main/resources/static/js/fileInput.js
View file

@ -47,12 +47,11 @@ function setupFileInput(chooser) {
const dt = e.dataTransfer;
const files = dt.files;
for (let i = 0; i < files.length; i++) {
allFiles.push(files[i]);
}
//Do not Update allFiles array here to prevent duplication, the change event listener will take care of that
const dataTransfer = new DataTransfer();
allFiles.forEach((file) => dataTransfer.items.add(file));
for (let i = 0; i < files.length; i++) {
dataTransfer.items.add(files[i]);
}
const fileInput = document.getElementById(elementId);
fileInput.files = dataTransfer.files;
@ -80,9 +79,40 @@ function setupFileInput(chooser) {
document.body.addEventListener("dragleave", dragleaveListener);
document.body.addEventListener("drop", dropListener);
// When adding files
$("#" + elementId).on("change", function (e) {
allFiles = Array.from(e.target.files);
// Get newly Added Files
const newFiles = Array.from(e.target.files).map(file => {
return {
file: file,
uniqueId: file.name + Date.now()// Assign a unique identifier to each file
};
});
// Add new files to existing files
allFiles = [...allFiles, ...newFiles];
// Update the file input's files property
const dataTransfer = new DataTransfer();
allFiles.forEach((fileObj) => dataTransfer.items.add(fileObj.file));
e.target.files = dataTransfer.files;
handleFileInputChange(this);
// Call the displayFiles function with the allFiles array
displayFiles(allFiles)
// Dispatch a custom event with the allFiles array
var filesUpdated = new CustomEvent("filesUpdated", { detail: allFiles });
document.dispatchEvent(filesUpdated);
});
// Listen for event of file being removed and then filter it out of the allFiles array
document.addEventListener("fileRemoved", function (e) {
const fileId = e.detail;
allFiles = allFiles.filter(fileObj => fileObj.uniqueId !== fileId); // Remove the file from the allFiles array using the unique identifier
// Dispatch a custom event with the allFiles array
var filesUpdated = new CustomEvent("filesUpdated", { detail: allFiles });
document.dispatchEvent(filesUpdated);
});
function handleFileInputChange(inputElement) {
@ -104,9 +134,4 @@ function setupFileInput(chooser) {
$(inputElement).siblings(".custom-file-label").addClass("selected").html(pdfPrompt);
}
}
//Listen for event of file being removed and the filter it out of the allFiles array
document.addEventListener("fileRemoved", function (e) {
const fileName = e.detail;
allFiles = allFiles.filter(file => file.name !== fileName);
});
}

72
src/main/resources/static/js/merge.js
View file

@ -2,15 +2,27 @@ let currentSort = {
field: null,
descending: false,
};
//New Array to keep track of unique id
let filesWithUniqueId = [];
let processedFiles = [];
document.getElementById("fileInput-input").addEventListener("change", function () {
var files = this.files;
var files = Array.from(this.files).map(file => {
return {
file: file,
uniqueId: file.name + Date.now()
};
});
filesWithUniqueId = files;
displayFiles(files);
});
//Get Files Updated Event from FileInput
document.addEventListener("filesUpdated", function (e) {
filesWithUniqueId = e.detail;
displayFiles(filesWithUniqueId);
});
/**
* @param {FileList} files
*/
function displayFiles(files) {
const list = document.getElementById("selectedFiles");
@ -18,12 +30,30 @@ function displayFiles(files) {
list.removeChild(list.firstChild);
}
// Clear the processedFiles array
processedFiles = [];
for (let i = 0; i < files.length; i++) {
const item = document.createElement("li");
item.className = "list-group-item";
item.dataset.id = files[i].uniqueId; // Assign the uniqueId to the list item
const fileNameDiv = document.createElement("div");
fileNameDiv.className = "filename";
fileNameDiv.textContent = files[i].file.name;
// Check for duplicates and add a warning if necessary
const duplicateFiles = files.filter(file => file.file.name === files[i].file.name);
if (duplicateFiles.length > 1) {
const warning = document.createElement("span");
warning.className = "duplicate-warning";
warning.textContent = "(Duplicate)";
fileNameDiv.appendChild(warning);
}
item.innerHTML = `
<div class="d-flex justify-content-between align-items-center w-100">
<div class="filename">${files[i].name}</div>
${fileNameDiv.outerHTML}
<div class="arrows d-flex">
<button class="btn btn-secondary move-up"><span>&uarr;</span></button>
<button class="btn btn-secondary move-down"><span>&darr;</span></button>
@ -33,7 +63,6 @@ function displayFiles(files) {
`;
list.appendChild(item);
}
attachMoveButtons();
}
@ -66,16 +95,18 @@ function attachMoveButtons() {
var removeButtons = document.querySelectorAll(".remove-file");
for (var i = 0; i < removeButtons.length; i++) {
// When the delete button is clicked
removeButtons[i].addEventListener("click", function (event) {
event.preventDefault();
var parent = this.closest(".list-group-item");
//Get name of removed file
var fileName = parent.querySelector(".filename").innerText;
var fileId = parent.dataset.id; // Get the unique identifier of the file to be deleted
parent.remove();
// Remove the file from the filesWithUniqueId array
filesWithUniqueId = filesWithUniqueId.filter(fileObj => fileObj.uniqueId !== fileId);
updateFiles();
//Dispatch a custom event with the name of the removed file
var event = new CustomEvent("fileRemoved", { detail: fileName });
document.dispatchEvent(event);
// Dispatch a custom event with the unique identifier of the file to be deleted
var fileRemoved = new CustomEvent("fileRemoved", { detail: fileId });
document.dispatchEvent(fileRemoved);
});
}
}
@ -103,30 +134,29 @@ document.getElementById("sortByDateBtn").addEventListener("click", function () {
});
function sortFiles(comparator) {
// Convert FileList to array and sort
const sortedFilesArray = Array.from(document.getElementById("fileInput-input").files).sort(comparator);
// Sort the filesWithUniqueId array
const sortedFilesArray = filesWithUniqueId.sort((a, b) => comparator(a.file, b.file));
// Refresh displayed list
displayFiles(sortedFilesArray);
// Update the files property
const dataTransfer = new DataTransfer();
sortedFilesArray.forEach((file) => dataTransfer.items.add(file));
sortedFilesArray.forEach((fileObj) => dataTransfer.items.add(fileObj.file));
document.getElementById("fileInput-input").files = dataTransfer.files;
}
function updateFiles() {
var dataTransfer = new DataTransfer();
var liElements = document.querySelectorAll("#selectedFiles li");
const files = document.getElementById("fileInput-input").files;
for (var i = 0; i < liElements.length; i++) {
var fileNameFromList = liElements[i].querySelector(".filename").innerText;
var fileFromFiles;
for (var j = 0; j < files.length; j++) {
var file = files[j];
if (file.name === fileNameFromList) {
dataTransfer.items.add(file);
var fileIdFromList = liElements[i].dataset.id; // Get the unique identifier from the list item
for (var j = 0; j < filesWithUniqueId.length; j++) {
var fileObj = filesWithUniqueId[j];
if (fileObj.uniqueId === fileIdFromList) {
dataTransfer.items.add(fileObj.file);
break;
}
}