How to add to an existing FileList object with JavaScript?

Question

I am creating a drag and drop file upload zone. When I upload multiple files at a time it works but I need it to be able to support uploading in multiple stages. I know that the issue below is that I am setting files each time, but I can't figure out the right way to get more files added to dFiles each time the method is called

    var dFiles;
    //var dFiles = []
    var holder = document.getElementById('holder');
    holder.ondrop = function (e) {
        e.preventDefault();
        dFiles = (e.dataTransfer.files);
        //dFiles.push(e.dataTransfer.files);
   }

I tried initilaizing dfiles as an empty array and adding the files (commented out above). Later this created a data type mismatch error when I was reading the file data

for (var i = 0; i < dFiles.length; i++) {
    reader = new FileReader();
    reader.readAsDataUrl(dFiles[i]); //error
}

Answer 1

e.dataTransfer.files is a list of files.

You will have to add each file separately to dFiles:

var files = e.dataTransfer.files;

for (var i = 0, l = files.length; i < l; i++) {
    dFiles.push(files[i]);
}

Or the ES6 way:

dFiles.push(...e.dataTransfer.files);