diff --git a/src/main/resources/static/css/fileSelect.css b/src/main/resources/static/css/fileSelect.css index e8f12979..b133e643 100644 --- a/src/main/resources/static/css/fileSelect.css +++ b/src/main/resources/static/css/fileSelect.css @@ -8,3 +8,7 @@ overflow-y: auto; white-space: pre-wrap; } +.duplicate-warning { + color: red; + font-weight: bold; +} \ No newline at end of file diff --git a/src/main/resources/static/js/fileInput.js b/src/main/resources/static/js/fileInput.js index 001c8f24..f3ae7504 100644 --- a/src/main/resources/static/js/fileInput.js +++ b/src/main/resources/static/js/fileInput.js @@ -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); - }); } diff --git a/src/main/resources/static/js/merge.js b/src/main/resources/static/js/merge.js index 55575727..a434e045 100644 --- a/src/main/resources/static/js/merge.js +++ b/src/main/resources/static/js/merge.js @@ -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 = `
-
${files[i].name}
+ ${fileNameDiv.outerHTML}
@@ -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; } }