diff --git a/src/main/resources/static/css/fileSelect.css b/src/main/resources/static/css/fileSelect.css index b133e643..e8f12979 100644 --- a/src/main/resources/static/css/fileSelect.css +++ b/src/main/resources/static/css/fileSelect.css @@ -8,7 +8,3 @@ 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 f3ae7504..001c8f24 100644 --- a/src/main/resources/static/js/fileInput.js +++ b/src/main/resources/static/js/fileInput.js @@ -47,12 +47,13 @@ function setupFileInput(chooser) { const dt = e.dataTransfer; const files = dt.files; - //Do not Update allFiles array here to prevent duplication, the change event listener will take care of that - const dataTransfer = new DataTransfer(); for (let i = 0; i < files.length; i++) { - dataTransfer.items.add(files[i]); + allFiles.push(files[i]); } + const dataTransfer = new DataTransfer(); + allFiles.forEach((file) => dataTransfer.items.add(file)); + const fileInput = document.getElementById(elementId); fileInput.files = dataTransfer.files; @@ -79,40 +80,9 @@ 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).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; - + allFiles = Array.from(e.target.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) { @@ -134,4 +104,9 @@ 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 a434e045..55575727 100644 --- a/src/main/resources/static/js/merge.js +++ b/src/main/resources/static/js/merge.js @@ -2,27 +2,15 @@ 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 = Array.from(this.files).map(file => { - return { - file: file, - uniqueId: file.name + Date.now() - }; - }); - filesWithUniqueId = files; + var files = this.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"); @@ -30,30 +18,12 @@ 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 = `
- ${fileNameDiv.outerHTML} +
${files[i].name}
@@ -63,6 +33,7 @@ function displayFiles(files) { `; list.appendChild(item); } + attachMoveButtons(); } @@ -95,18 +66,16 @@ 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"); - var fileId = parent.dataset.id; // Get the unique identifier of the file to be deleted + //Get name of removed file + var fileName = parent.querySelector(".filename").innerText; parent.remove(); - // Remove the file from the filesWithUniqueId array - filesWithUniqueId = filesWithUniqueId.filter(fileObj => fileObj.uniqueId !== fileId); updateFiles(); - // Dispatch a custom event with the unique identifier of the file to be deleted - var fileRemoved = new CustomEvent("fileRemoved", { detail: fileId }); - document.dispatchEvent(fileRemoved); + //Dispatch a custom event with the name of the removed file + var event = new CustomEvent("fileRemoved", { detail: fileName }); + document.dispatchEvent(event); }); } } @@ -134,29 +103,30 @@ document.getElementById("sortByDateBtn").addEventListener("click", function () { }); function sortFiles(comparator) { - // Sort the filesWithUniqueId array - const sortedFilesArray = filesWithUniqueId.sort((a, b) => comparator(a.file, b.file)); + // Convert FileList to array and sort + const sortedFilesArray = Array.from(document.getElementById("fileInput-input").files).sort(comparator); // Refresh displayed list displayFiles(sortedFilesArray); // Update the files property const dataTransfer = new DataTransfer(); - sortedFilesArray.forEach((fileObj) => dataTransfer.items.add(fileObj.file)); + sortedFilesArray.forEach((file) => dataTransfer.items.add(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 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); + 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); break; } }