Question

59

Is it possible to update FileList?

rated 0 times [ 65] [ 6] / answers: 1 / hits: 49411 / 6 Years ago, wed, august 29, 2018, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

gabriel

Add To Favorites

Follow

Total Points: 323

Total Questions: 107

Total Answers: 108

Location: Federated States of Micronesia

Member since Sun, May 16, 2021

3 Years ago

answered 6 Years ago dahlias · Accepted Answer

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