diff --git a/scancodeio/static/add-inputs.js b/scancodeio/static/add-inputs.js index 508326ce2..350181573 100644 --- a/scancodeio/static/add-inputs.js +++ b/scancodeio/static/add-inputs.js @@ -21,6 +21,8 @@ // Visit https://github.com/nexB/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 @@ -28,8 +30,33 @@ function updateFiles() { if (fileInput.files.length > 0) { const fileName = document.querySelector('#inputs_file_name'); fileName.innerHTML = ""; - for (let file of fileInput.files) { - fileName.innerHTML += `${file.name}`; + + // 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 += ` + + ${file.name} + + + + + `; + document.getElementById("file-delete-btn-"+ fileNameWithoutSpaces).addEventListener("click", function(event){ + disableEvent(event); + removeFile(fileNameWithoutSpaces); + if(selectedFiles.length == 0){ + fileName.innerHTML ="No files selected" + } + }); } } } @@ -40,15 +67,36 @@ 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);