Как программно вставить файлы в input?

Question

[Надим]

Где это может пригодится? В основном для JavaScript-ботов, когда требуется подгрузить файлы куда-нибудь форму и при это совершенно нет никакой возможности распутать сильно обфусцированный код.

Answer 1

[Надим]

Лайфхак для создания коллекции файлов 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, который нарыл это решение где-то в недрах иностранных сайтов. Сам я, в свое время сколько не искал, везде был ответ, что это невозможно, а оказалось, что нихрена подобного =)

Comments

[Сергей delphinpro]

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

Это "решение" в общем-то в документации присутствует, зачем его искать? =)

[Надим]

Сергей delphinpro, вы похоже не понимаете суть проблемы. В поле input нельзя вставить тип File. Да, тип данных File легко создается в конструкторе, но это едва ли вам поможет потом запихнуть этот файл в поле) Для вставки файла в поле он должен быть в составе коллекции FileList, вот только конструктор FileList заблокирован, его нельзя создавать нативно. Выше обходной путь создания FileList.

[Сергей delphinpro]

Надим Закиров, да. спасибо за разъяснение.