<table class="files-table table">
<thead>
<th>Filename</th>
<th>Type</th>
<th>Status</th>
<th onclick="sortTableByDate()">
Date
<i
class="fa-solid fa-angle-down"
,
style="
font-size: 12px;
color: white;
height: 0;
margin-top: 0 !important;
"
></i>
</th>
<th></th>
</thead>
<tbody></tbody>
</table>
<div class="add-table-row d-flex justify-content-end">
<label for="tableFiles" class="choose-file-btn">
<span>Add Files</span>
</label>
<input
type="file"
id="tableFiles"
style="display: none"
multiple
onchange="handleFiles(this.files)"
/>
</div>
The table was constructed here, with data appearing under corresponding table headers when files are added using the "Add Files" button.
<script>
function handleFiles(files) {
const tbody = document.querySelector(".files-table tbody");
for (const file of files) {
const fileName = file.name;
const isDuplicate = Array.from(tbody.rows).some(
(row) => row.cells[0].textContent === fileName
);
if (!isDuplicate) {
const row = tbody.insertRow();
const filenameCell = row.insertCell(0);
const typeCell = row.insertCell(1);
const statusCell = row.insertCell(2);
const dateCell = row.insertCell(3);
const deleteCell = row.insertCell(4);
filenameCell.textContent = fileName;
typeCell.textContent = getFileType(file.type);
statusCell.textContent = "Pending";
const currentDate = new Date();
const formattedDate = currentDate.toISOString().split("T")[0];
dateCell.textContent = formattedDate; // Date only
// Add delete icon to the last cell
const deleteIcon = document.createElement("i");
deleteIcon.className = "fa-regular fa-trash-can";
deleteIcon.style.color = "#d90000";
deleteIcon.addEventListener("click", function () {
deleteRow(this);
});
deleteCell.appendChild(deleteIcon);
}
}
checkIconVisibility();
}
function getFileType(fileType) {
return fileType || "Unknown Type";
}
function handleDragOver(event) {
event.preventDefault();
const dragContainer = document.getElementById("drag-drop-container");
}
function handleDrop(event) {
event.preventDefault();
const dragContainer = document.getElementById("drag-drop-container");
const files = event.dataTransfer.files;
handleFiles(files);
}
function deleteRow(icon) {
const row = icon.closest("tr");
row.parentNode.removeChild(row);
checkIconVisibility();
}
</script>
Through this script, I populated the table with the selected file's name under "Filename", the upload date under "Date", and the file type under "Type". A delete icon was included at the end of each table row.
All functions are operational, however, a noteworthy issue arises. If a file named x.png is uploaded and then deleted, it cannot be re-uploaded. But if a different file, let's say z.png, is uploaded, then x.png can be re-uploaded. The ability to directly re-upload a previously deleted file is inaccessible. This poses a limitation on re-adding the last deleted file.