Revert "User Friendly Merge File Selection"

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;
-}

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
+    allFiles = Array.from(e.target.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) {
@@ -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);
+  });
 }

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 => {
+  var files = this.files;
-    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");
 
@@ -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 = `
             <div class="d-flex justify-content-between align-items-center w-100">
-                ${fileNameDiv.outerHTML}
+                <div class="filename">${files[i].name}</div>
                 <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>
@@ -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
+      //Dispatch a custom event with the name of the removed file
-      var fileRemoved = new CustomEvent("fileRemoved", { detail: fileId });
+      var event = new CustomEvent("fileRemoved", { detail: fileName });
-      document.dispatchEvent(fileRemoved);
+      document.dispatchEvent(event);
     });
   }
 }
@@ -134,29 +103,30 @@ document.getElementById("sortByDateBtn").addEventListener("click", function () {
 });
 
 function sortFiles(comparator) {
-  // Sort the filesWithUniqueId array
+  // Convert FileList to array and sort
-  const sortedFilesArray = filesWithUniqueId.sort((a, b) => comparator(a.file, b.file));
+  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
+    var fileNameFromList = liElements[i].querySelector(".filename").innerText;
-    for (var j = 0; j < filesWithUniqueId.length; j++) {
+    var fileFromFiles;
-      var fileObj = filesWithUniqueId[j];
+    for (var j = 0; j < files.length; j++) {
-      if (fileObj.uniqueId === fileIdFromList) {
+      var file = files[j];
-        dataTransfer.items.add(fileObj.file);
+      if (file.name === fileNameFromList) {
+        dataTransfer.items.add(file);
         break;
       }
     }