Tengo un fragmento de código que funciona... me permite mostrar varios archivos en una lista cuando un usuario hace clic en Elegir archivo. El código funciona bien. Sin embargo, estoy tratando de averiguar si es posible agregar a la lista en lugar de crear una nueva cada vez. He investigado esto la mayor parte de la tarde y la gran mayoría de los artículos dicen que no es fácil de hacer. ¿Debería usar un enfoque de FormData en su lugar? ¿Eso me compraría algo?

Aquí está mi código Javascript... Funciona bien...

 window.onload = function() { const inputElement = document.getElementById("my_files"); const fileNames = document.getElementById("file_names"); let fileList = []; function removeFile(event) { event.preventDefault(); let filename = this.dataset.filename; let modifiedFileList = new DataTransfer(); for (let i = 0; i < fileList.length; i++) { if (fileList[i].name !== filename) { modifiedFileList.items.add(fileList[i]); } } inputElement.files = modifiedFileList.files; fileList = inputElement.files; handleFiles(fileList); return false; } inputElement.addEventListener("change", handleFilesListener, false); function handleFilesListener() { fileList = this.files; handleFiles(fileList); } function handleFiles(fileList) { fileNames.textContent = ''; for (let i = 0; i < fileList.length; i++) { let listElement = document.createElement("li"); let textNode = document.createTextNode(fileList[i].name); listElement.appendChild(textNode); listElement.setAttribute("class","attachmentname"); let removeButton = document.createElement("button"); removeButton.innerHTML = "Remove&nbsp"; removeButton.setAttribute('type', 'button') removeButton.setAttribute("class", "button121"); removeButton.setAttribute('data-filename', fileList[i].name) removeButton.addEventListener('click', removeFile) listElement.appendChild(removeButton); fileNames.appendChild(listElement); } } }

Nuevamente, estoy tratando de averiguar si puedo agregar a esta lista en lugar de recorrerla constantemente si la lista cambia. Intenté hacer un anexo en lugar de agregar a continuación... pero eso no funcionó. Soy un novato autoproclamado... así que, por favor, trátenlo con calma. :).

 let filename = this.dataset.filename; let modifiedFileList = new DataTransfer(); for (let i = 0; i < fileList.length; i++) { if (fileList[i].name !== filename) { modifiedFileList.items.add(fileList[i]); } }

De antemano, gracias por cualquier consejo.