Как клонировать один конкретный файл из коллекции FileList?

Question

[zkrvndm]

Здравствуйте. Для чтобы клонировать и вставить файл в другое поле, я делаю так:

document.querySelectorAll('input[type="file"]')[1].files = document.querySelectorAll('input[type="file"]')[0].cloneNode(true).files;

Это работает как с одним файлом, так и сразу с множеством файлов, если есть атрибут multiple.

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

То есть, допустим у меня есть поле input с атрибутом multiple и там выбрано 10 файлов. Могу ли я каким-нибудь образом из этих 10-файлов выбрать один и вставить его во второе поле input?

Answer 1

[zkrvndm]

Лайфхак для создания коллекции файлов FileList:

var info = 'Какой-нибудь текст';

var dt  = new DataTransfer();
dt.items.add(new File([info], 'primer.txt', {type: 'text/plain'}));
var file_list = dt.files;

console.log('Коллекция файлов создана:');
console.dir(file_list);

// Вставим созданную коллекцию в реальное поле:
document.querySelector('input[type="file"]').files = file_list;

В переменную info вместо текста, можно положить в том числе и Blob - это особенность функции new File() которая первым параметром может принять как массив из текстов, так и массив из Blob.

Фактически лайфхак выше позволяет нам JavaScript-ом скачать любой какой угодно файл со своего сайта и вставить его абсолютно в любое поле <input type="file"> - что просто архиполезно для браузерных ботов.

Также способ выше можно применить для редактирования уже выбранных пользователем файлов. Например, если надо из поля выбора файлов убрать какие-то определенные файлы и при этом сделать не фиктивно, а реально.

Огромное спасибо пользователю Mmx Symfony, который нарыл это решение где-то в недрах иностранных сайтов. Сам я, в свое время сколько не искал, везде был ответ, что это невозможно, а оказалось, что нихрена подобного =)