Improve "inputs" file handling in UI (#1036)

- Enhance file input handling in the UI to avoid losing selected files when adding new inputs.
- Introduce a `selectedFiles` array to store and manage selected files.
- Display selected files in the UI with additional features, including a delete button.
- Update the `removeFile` function to correctly remove files from both the UI and the `selectedFiles` array.

Fixes: #991

Signed-off-by: Jayanth Kumar <[email protected]>
Co-authored-by: tdruez <[email protected]>

Author: jayanth-kumar-morem

scancodeio/static/add-inputs.js

@@ -21,15 +21,41 @@
 // Visit https://github.com/aboutcode-org/scancode.io for support and download.
 
 const fileInput = document.querySelector("#id_input_files");
+let selectedFiles = []; // Store selected files
 fileInput.onchange = updateFiles;
 
 // Update the list of files to be uploaded in the UI
 function updateFiles() {
   if (fileInput.files.length > 0) {
     const fileName = document.querySelector("#inputs_file_name");
     fileName.innerHTML = "";
-    for (let file of fileInput.files) {
-      fileName.innerHTML += `<span class="is-block">${file.name}</span>`;
+
+    // Update the selectedFiles array
+    const newFiles = Array.from(fileInput.files);
+    // Create a Set to track unique file names
+    const uniqueFileNames = new Set(selectedFiles.map(file => file.name));
+    // Filter out files with the same name
+    const filteredNewFiles = newFiles.filter(file => !uniqueFileNames.has(file.name));
+    // Concatenate the unique files to the existing selectedFiles array
+    selectedFiles = selectedFiles.concat(filteredNewFiles);
+
+    for (let file of selectedFiles) {
+      const fileNameWithoutSpaces = file.name.replace(/\s/g, '');
+      fileName.innerHTML += `
+      <span class="is-flex is-justify-content-space-between is-block" id="file-name-${fileNameWithoutSpaces}">
+        <span class="is-block">${file.name}</span>
+        <a href="#" onclick="removeFile('${fileNameWithoutSpaces}')" class="model-button" id="file-delete-btn-${fileNameWithoutSpaces}">
+          <i class="fa-solid fa-trash-can"></i>
+        </a>
+      </span>
+      `;
+      document.getElementById("file-delete-btn-"+ fileNameWithoutSpaces).addEventListener("click", function(event){
+        disableEvent(event);
+        removeFile(fileNameWithoutSpaces);
+        if(selectedFiles.length == 0){
+          fileName.innerHTML ="<i>No files selected</i>"
+        }
+      });
     }
   }
 }
@@ -40,15 +66,37 @@ function disableEvent(event) {
   event.preventDefault();
 }
 
+function removeFile(fileName) {
+  selectedFiles = selectedFiles.filter(file => {
+    const fileNameWithoutSpaces = file.name.replace(/\s/g, '');
+    return fileNameWithoutSpaces !== fileName;
+  });
+
+  const fileNameElement = document.getElementById(`file-name-${fileName}`);
+  if (fileNameElement) {
+    fileNameElement.remove();
+  }
+
+  const dataTransfer = new DataTransfer();
+  for (let file of selectedFiles) {
+    dataTransfer.items.add(file);
+  }
+
+  fileInput.files = dataTransfer.files;
+}
+
 function dropHandler(event) {
   disableEvent(event);
   const droppedFiles = event.dataTransfer.files;
-  const updatedFiles = Array.from(fileInput.files);
+  const updatedFilesSet = new Set(Array.from(fileInput.files));
 
   for (let file of droppedFiles) {
-    updatedFiles.push(file);
+    updatedFilesSet.add(file);
   }
 
+  // Convert the Set back to an array if needed
+  const updatedFiles = Array.from(updatedFilesSet);
+
   const dataTransfer = new DataTransfer();
   for (let file of updatedFiles) {
     dataTransfer.items.add(file);