Is it possible to update FileList?

Question

I have:

<input type="file" id="f" name="f" onchange="c()" multiple /> 

Every time the user selects a file(s), I build a list of all the selected files by pushing each element of f.files to an array:

var Files = []; function c() {   for (var i=0;i<this.files.length;i++) {     Files.push(this.files[i]);   }; } 

At form submit, f.files contains only the item(s) from the last select action, so I will need to update f.files with the list of FileList items I have accumulated:

const upload=document.getElementById("f"); upload.files = files; 

But the second line gives:

Uncaught TypeError: Failed to set the 'files' property on 'HTMLInputElement': The provided value is not of type 'FileList'.

It is not happy that I am assigning it an array. How can I construct a FileList object from the list of FileList elements I have earlier collected?

Side question: I thought Javascript uses dynamic types. Why is it complaining about the wrong type here?

Answer 1

You can't modify a Filelist, but you can create a new one using a DataTransfer object, and if you wish you can copy your data into it to create a duplicate with the specific change you want to make.

let list = new DataTransfer(); let file = new File(["content"], "filename.jpg"); list.items.add(file);  let myFileList = list.files; 

You can then set it as the file attribute of the DOM node:

fileInput.files = myFileList; 

If you wished, you could iterate over your old FileList, copying files to the new one.

Answer 2

It's like you said

Failed to set the 'files' property on 'HTMLInputElement': The provided value is not of type 'FileList'.

you can only set the files with a FileList instance, unfortunately the FileList is not constructible or changeable, but there is a way to get one in a round about way

/**  * @params {File[]} files Array of files to add to the FileList  * @return {FileList}  */ function FileListItems (files) {   var b = new ClipboardEvent("").clipboardData || new DataTransfer()   for (var i = 0, len = files.length; i<len; i++) b.items.add(files[i])   return b.files }  var files = [   new File(['content'], 'sample1.txt'),   new File(['abc'], 'sample2.txt') ];   fileInput.files = new FileListItems(files) console.log(fileInput.files)

<input type="file" id="fileInput" multiple />

doing this will trigger a change event, so you might want to toggle the change event listener on and off