Возможно ли обновить FileList?

Question

у меня есть:

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

Каждый раз, когда пользователь выбирает файл (ы), я строю список всех выбранных файлов, помещая каждый элемент f.files в массив:

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

При отправке формы f.files содержит только элемент (ы) из последнего действия выбора, поэтому мне нужно обновить f.files списком FileList элементов, которые я накопил:

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

Но вторая строка дает:

Uncaught TypeError: Не удалось установить свойство 'files' для 'HTMLInputElement': предоставленное значение не относится к типу 'FileList'.

Не рад, что я назначаю ему массив. Как я могу создать объект FileList из списка FileList элементов, которые я ранее собрал?

Дополнительный вопрос: я думал, что Javascript использует динамические типы. Почему он жалуется на неправильный тип здесь?

Answer 1

Невозможно изменить список файлов, но вы можете создать его с помощью объекта DataTransfer.

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

let myFileList = list.files;

Затем вы можете установить его как атрибут файла узла DOM:

fileInput.files = myFileList;

Если вы хотите, вы можете перебрать свой старый FileList, копируя файлы в новый.

Answer 2

Это как вы сказали

вы можете установить файлы только с помощью FileList, к сожалению, FileList не может быть создан или изменен, но есть способ получить его в один конец.

// Used for creating a new FileList in a round-about way
function FileListItem(a) {
  a = [].slice.call(Array.isArray(a) ? a : arguments)
  for (var c, b = c = a.length, d = !0; b-- && d;) d = a[b] instanceof File
  if (!d) throw new TypeError("expected argument to FileList is File or array of File objects")
  for (b = (new ClipboardEvent("")).clipboardData || new DataTransfer; c--;) b.items.add(a[c])
  return b.files
}

var files = [
  new File(['content'], 'sample1.txt'),
  new File(['abc'], 'sample2.txt')
];

fileInput.files = new FileListItem(files)

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

выполнение этого вызовет событие изменения, поэтому вы можете включить и выключить прослушиватель события изменения