How to make the Multiple file input field in a second selection keep the previously selected files?

Question

When Open the file selection window it lets me select multiple files, OK!.

But after opening the files if user click again to open more files it clears the previous selection... How to make him leave the previous selection and add the new selection ?

---

<input type="file"  name="imagem[]" id="imagem[]" class="form-control" multiple="multiple" >

Answer 1

I think you could use an Event Listener as in the example I made below. So, in each new input, you add a File, or more, in the Array inputFiles.

By clicking on Remove File is deleted from array.

Then just send the back end to 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>