Как добавлять и редактировать input Files перед отправкой?

Question

[Антон Шульц]

При добавлении файлов, возвращает их массив, но если к добавленным, загрузить после ещё 2, то в this.files уже новый массив только из 2 новых файлов.

input.addEventListener("change", function() {
   let file = this.files;
   console.log(file);
}

Как мне к уже загруженным в инпут изображениям добавить новые?
Что бы в итоге я мог отправить на сервер все те, что загрузил и не удалил.

Answer 1

[coderisimo]

Пишу на коленке...
1) поле типа file с атрибутом multiple?
2)

var filesInput = document.getElementById('file-input-id');
var fileList =[];

input.addEventListener("change", function() {

fileList =[];
for(var i=0; i<filesInput.files.length; i++)
fileList.push(filesInput.files[i]);
}
//fileList -  наполнен! ))

Comments

[zkrvndm]

А fileList случайно нельзя потом к другому полю input прикрепить? Я почему спрашиваю, вот:
Как клонировать один конкретный файл из коллекции FileList?
Как разблокировать FileList на запись?
Существуют ли способы удалять файлы выборочно из input multiple?

[coderisimo]

Надим Закиров, вы можете в fileList добавлять файлы из разных источников, но суть вопроса здесь иная )

[zkrvndm]

coderisimo, все я понимаю, но возможен ли обратный процесс? Вот что меня заинтересовало)

[coderisimo]

Надим Закиров, какой процесс? FileList readonly . Но, вы всегда можете производить нужные манипуляции с массивом fileList. Удаляйте из него что угодно . И запоминайте , что удалили. При следующем обновлении

input.addEventListener("change"

просто исключайте уже удаленные файлы из попадания в массив fileList

[zkrvndm]

coderisimo, я не про это. Для меня очевидно, что в fileList я могу собрать файлы, которые мне нужны. Могу ли я потом этот fileList вставить в поле input[type="file"]?

[coderisimo]

Надим Закиров, низззззя.)

[zkrvndm]

coderisimo, а жаль - увидев этот вопрос и ваш комментарий подумалось, а вдруг какой-нибудь хитрый обходной пусть есть? Оттуда и мои странные вопросы)