From 0e262dc2bd53a63f7592a53350a1a8e8a0364cee Mon Sep 17 00:00:00 2001 From: ge64qev Date: Mon, 13 May 2024 22:27:25 +0200 Subject: [PATCH] Added a unique id for all files to be a able to delete duplicate files. --- src/main/resources/static/js/fileInput.js | 40 ++++++++++++----- src/main/resources/static/js/merge.js | 55 ++++++++++++++--------- 2 files changed, 63 insertions(+), 32 deletions(-) diff --git a/src/main/resources/static/js/fileInput.js b/src/main/resources/static/js/fileInput.js index d575dbaa..cf1b9896 100644 --- a/src/main/resources/static/js/fileInput.js +++ b/src/main/resources/static/js/fileInput.js @@ -79,22 +79,43 @@ function setupFileInput(chooser) { document.body.addEventListener("dragleave", dragleaveListener); document.body.addEventListener("drop", dropListener); + // When adding files $("#" + elementId).on("change", function (e) { - //Get newly Added Files - const newFiles = 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 Files to existing Files - allFiles = allFiles.concat(newFiles); + // Add new files to existing files + allFiles = [...allFiles, ...newFiles]; - //Update the file inout`s files property + // Update the file input's files property const dataTransfer = new DataTransfer(); - allFiles.forEach((file) => dataTransfer.items.add(file)); + allFiles.forEach((fileObj) => dataTransfer.items.add(fileObj.file)); e.target.files = dataTransfer.files; handleFileInputChange(this); - //Call the displayFiles function with the allFiles array + // 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; + console.log('File to be removed:', fileId); // Log the uniqueId of the file to be removed + console.log('All files before removal:', allFiles); // Log all files before removal + allFiles = allFiles.filter(fileObj => fileObj.uniqueId !== fileId); // Remove the file from the allFiles array using the unique identifier + console.log('All files after removal:', allFiles); // Log all files after removal + // Dispatch a custom event with the allFiles array + var filesUpdated = new CustomEvent("filesUpdated", { detail: allFiles }); + document.dispatchEvent(filesUpdated); }); function handleFileInputChange(inputElement) { @@ -116,9 +137,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); - }); } diff --git a/src/main/resources/static/js/merge.js b/src/main/resources/static/js/merge.js index 7037405d..a60ba7f6 100644 --- a/src/main/resources/static/js/merge.js +++ b/src/main/resources/static/js/merge.js @@ -2,40 +2,53 @@ let currentSort = { field: null, descending: false, }; +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); }); +document.addEventListener("filesUpdated", function (e) { + filesWithUniqueId = e.detail; + displayFiles(filesWithUniqueId); +}); + -/** - * @param {File[]} files - */ function displayFiles(files) { const list = document.getElementById("selectedFiles"); - const processedFiles = []; while (list.firstChild) { 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].name; + fileNameDiv.textContent = files[i].file.name; // Check for duplicates - if (processedFiles.includes(files[i].name)) { + 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); - } else { - processedFiles.push(files[i].name); } + item.innerHTML = `
${fileNameDiv.outerHTML} @@ -80,16 +93,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); }); } } @@ -129,18 +144,18 @@ function sortFiles(comparator) { 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 fileIdFromList = liElements[i].dataset.id; // Get the unique identifier from the list item var fileFromFiles; - for (var j = 0; j < files.length; j++) { - var file = files[j]; - if (file.name === fileNameFromList) { - dataTransfer.items.add(file); + for (var j = 0; j < filesWithUniqueId.length; j++) { + var fileObj = filesWithUniqueId[j]; + if (fileObj.uniqueId === fileIdFromList) { + dataTransfer.items.add(fileObj.file); break; } }