Penso que você poderia utilizar um Event Listener como no exemplo que fiz abaixo. Assim, em cada novo input, você adiciona um File, ou mais, na Array inputFiles
.
Ao clicar em Remover o File é eliminado da array.
Depois basta enviar para o back end a Array inputFiles
.
var inputFiles = [];
function newInput(input) {
var filesStr = "";
for (let i = 0; i < input.files.length; i++) {
inputFiles.push(input.files[i]);
filesStr += "<li>" + input.files[i].name + "<button onclick='removeLi(this)'>Remover</button>" + "</li>";
}
document.getElementById("file-input").value = "";
document.getElementById("dp-files").innerHTML += filesStr;
}
function removeLi(e) {
inputFiles = inputFiles.filter(function(file) {
return file.name !== e.parentNode.innerHTML.split("<button")[0];
})
e.parentNode.parentNode.removeChild(e.parentNode);
}
<form id='form' action='' method='post' enctype='multipart/form-data'>
<input id='file-input' class='file-input' type='file' name='file' onchange="newInput(this)" multiple='multiple' />
</form>
<ul id="dp-files"></ul>