Added a unique id for all files to be a able to delete duplicate files.
This commit is contained in:
parent
c1fea7c92f
commit
0e262dc2bd
2 changed files with 63 additions and 32 deletions
|
@ -79,22 +79,43 @@ 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);
|
||||
// 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 Files to existing Files
|
||||
allFiles = allFiles.concat(newFiles);
|
||||
// Add new files to existing files
|
||||
allFiles = [...allFiles, ...newFiles];
|
||||
|
||||
//Update the file inout`s files property
|
||||
// Update the file input's files property
|
||||
const dataTransfer = new DataTransfer();
|
||||
allFiles.forEach((file) => dataTransfer.items.add(file));
|
||||
allFiles.forEach((fileObj) => dataTransfer.items.add(fileObj.file));
|
||||
e.target.files = dataTransfer.files;
|
||||
|
||||
handleFileInputChange(this);
|
||||
|
||||
//Call the displayFiles function with the allFiles array
|
||||
// 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;
|
||||
console.log('File to be removed:', fileId); // Log the uniqueId of the file to be removed
|
||||
console.log('All files before removal:', allFiles); // Log all files before removal
|
||||
allFiles = allFiles.filter(fileObj => fileObj.uniqueId !== fileId); // Remove the file from the allFiles array using the unique identifier
|
||||
console.log('All files after removal:', allFiles); // Log all files after removal
|
||||
// Dispatch a custom event with the allFiles array
|
||||
var filesUpdated = new CustomEvent("filesUpdated", { detail: allFiles });
|
||||
document.dispatchEvent(filesUpdated);
|
||||
});
|
||||
|
||||
function handleFileInputChange(inputElement) {
|
||||
|
@ -116,9 +137,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);
|
||||
});
|
||||
}
|
||||
|
|
|
@ -2,40 +2,53 @@ let currentSort = {
|
|||
field: null,
|
||||
descending: false,
|
||||
};
|
||||
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);
|
||||
});
|
||||
document.addEventListener("filesUpdated", function (e) {
|
||||
filesWithUniqueId = e.detail;
|
||||
displayFiles(filesWithUniqueId);
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* @param {File[]} files
|
||||
*/
|
||||
function displayFiles(files) {
|
||||
const list = document.getElementById("selectedFiles");
|
||||
const processedFiles = [];
|
||||
|
||||
while (list.firstChild) {
|
||||
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].name;
|
||||
fileNameDiv.textContent = files[i].file.name;
|
||||
|
||||
// Check for duplicates
|
||||
if (processedFiles.includes(files[i].name)) {
|
||||
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);
|
||||
} else {
|
||||
processedFiles.push(files[i].name);
|
||||
}
|
||||
|
||||
|
||||
item.innerHTML = `
|
||||
<div class="d-flex justify-content-between align-items-center w-100">
|
||||
${fileNameDiv.outerHTML}
|
||||
|
@ -80,16 +93,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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -129,18 +144,18 @@ function sortFiles(comparator) {
|
|||
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 fileIdFromList = liElements[i].dataset.id; // Get the unique identifier from the list item
|
||||
var fileFromFiles;
|
||||
for (var j = 0; j < files.length; j++) {
|
||||
var file = files[j];
|
||||
if (file.name === fileNameFromList) {
|
||||
dataTransfer.items.add(file);
|
||||
for (var j = 0; j < filesWithUniqueId.length; j++) {
|
||||
var fileObj = filesWithUniqueId[j];
|
||||
if (fileObj.uniqueId === fileIdFromList) {
|
||||
dataTransfer.items.add(fileObj.file);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue