I cannot re-add an element deleted from the table

Issue

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

I created a table here and printed the information under the relevant ths with the help of 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; // Only the date

                // 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>

With this script, I added the name of the selected file under filename, the upload date under date, and the file type under type. I added a delete icon at the end of the created table-row.

All functions work properly, but there is a problem. For example, I upload a file named x.png and then delete it. I can't load x.png again. If I upload a file called z.png, then I can upload x.png. Why can't I directly upload a file I deleted? I cannot re-add the last deleted file.

Solution

Your predicament is caused by the fact that the handleFiles() handler is hooked into the <input> element via the change event via the onchange attribute. As the name suggests, this event fires when the <input> element's value changes. Selecting the same file would not change the value, as it would be the same value.

To ensure the value changes after selection, you could consider "resetting" the <input> value back to an empty state after handleFiles(), by setting .value = ''.

const checkIconVisibility = () => {};

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; // Only the date

      // 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();
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<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); this.value = ''"
  />
</div>

Answered By - Wongjn