remove / add files dynamically to upload field-CodePudding

I have this input field for file upload:

<input onchange="getFiles()" type="file" name='files[]' id="customFile" multiple />

On click I can seelct multiple files for upload. Onchange the function getFiles starts:

function getFiles() {
   console.log( $('#customFile').get(0).files )
}

which shows me this result:

This are my two example files. But If I forgot a file for upload I would be able to add this file with a new upload process. Problem is, if I click again on my upload field and select the forgotten file, it will override the other 2 selected files bevor.

In my "FileList" will only be the last selected. Is there a way to add one file instead to select all 3 files again for upload?

CodePudding user response：

You might want to save previously uploaded files in local array and push to it inside "getFiles" event handler. Something like this:

const uploadedFiles = [];
function getFiles() {
  uploadedFiles.push(...$('#customFile').get(0).files);
}

It might also be a good idea to refer to file input using "this" con