Как создать коллекцию файлов FileList?

Question

[zkrvndm]

Если вы попытайтесь это сделать в лоб:
var file_list = new FileList();

То обнаружите, что это запрещено на уровне настроек браузера:
Uncaught TypeError: Illegal constructor

И даже в документации вы не найдете ответа, так как согласно ей FileList в принципе недоступна на запись.

Однако, способ все же существует и есть лайфхак, который позволяет создавать свои коллекции, об этом ниже.

Answer 1

[zkrvndm]

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

// Создадим простой текстовый файл:
var data = 'Здесь текст для файла или положите в переменную Blob';
var file = new File([data], 'primer.txt', {type: 'text/plain'});

// Создаем коллекцию файлов:
var dt = new DataTransfer();
dt.items.add(file);
var file_list = dt.files;

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

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

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

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

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

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

Comments

[Евгений Палыч]

Приведённый способ, в firefox 87 уже не работает. dt.files остаётся пустым.
Возможно это считалось уязвимостью, была закрыта?

[zkrvndm]

Евгений Палыч, под firefox есть свой способ.

[Евгений Палыч]

Надим Закиров,

под firefox есть свой способ

Пожалуйста подскажите, хотя бы что искать, если конечно этот способ не связан с созданием дополнения с привилегиями.

[zkrvndm]

Евгений Палыч, для старых версий Firefox FileList создается так:

var data = 'Здесь текст для файла или положите в переменную Blob';
var file = new File([data], 'primer.txt', {type: 'text/plain'});

// Создаем коллекцию файлов:
var dt = new ClipboardEvent('').clipboardData;
dt.items.add(file);
var file_list = dt.files;

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

[Евгений Палыч]

Надим Закиров, Спасибо. Это уже имеется

var dt = new ClipboardEvent('').clipboardData || new DataTransfer();

[zkrvndm]

Евгений Палыч, у меня стоит Firefox 87 версии и у меня работают оба варианта. Покажите скриншот консоли, не пойму почему у вас не работает.

[Евгений Палыч]

Надим Закиров, Спасибо за помощь. Всё работает.
Отмечу только непонятное поведение с использованием кода в "Gresemonkey". При выводе в консоль dt, его параметр files имеет значение null, при этом файл есть в dt.files

spoiler

console.log(dt.files);
console.log(dt);

Такого не происходит если запускать код в консоле.

[zkrvndm]

Евгений Палыч, если Gresemonkey выполняет код в отдельном контексте, то тогда такое поведение вполне возможно. Вы должны заставить Gresemonkey инжектировать свой код непосредственно на страницу, чтобы код работал именно в контексте страницы.