Как разблокировать FileList на запись?

Question

[zkrvndm]

Я понимаю, что коллекция файлов FileList доступна только для чтения и его нельзя редактировать, но ведь в нашем мире все так устроено, что если что-то нельзя, но сильно хочется - тогда можно. Вопрос лишь в том, КАК?

Быть может существуют сборки Chrome с отключенными опциями безопасности? Или нечто третье?

Comments

[dblearn94]

Надим Закиров, мне просто интересно, зачем вам это?
покажите реальную задачу

[Антон]

dblearn94, В моем случае: Мультифайл с предпросмотром, удалением, сортировкой, ну и естественно, с последующей передачей сего в обработчик

[dblearn94]

Антон, а в чем проблема сделать это без вмешательства в FileList?
Раз уж вы дошли до "заставить пользователя установить определенную версию Chrome"...

Например можно брать file из FileList и обрабатывать его, делать предпросмотр и тд и тп, обычный объект

[Антон]

dblearn94, Этого идея автора, я с ним в этом плане не согласен.
В своем случае, я успешно делал свой собственный массив, который впоследствии отдавал через FormData, но автору формдата не подходит, да и формдата, насколько я помню, с махровыми IE не очень дружит

[zkrvndm]

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

Отмечу, что боты у меня всегда работают внутри iframe поэтому родительское окно неизменно, соответственно при необходимости у меня бот может легко обратится к родителю и взять оттуда файл для вставки:

document.querySelector('input[type="file"]').files = window.top.document.querySelector('input[type="file"]').cloneNode(true).files;

Эта схема прекрасно работает и не разу еще меня не подводила.

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

[Stalker_RED]

Надим Закиров, бот может заглянуть в родительское окно, прочитать FileList, найти нужные ему файлы, и FileReader-ом прочесть их. Затем использовать хоть через FormData, хоть как вам угодно.

Готовых расширений я не знаю, и сомневаюсь что они есть. Если флаг не найдется, то остается еще вариант с ковырянием исходника хрома, и пересборкой. Я такое не умею.

[zkrvndm]

Stalker_RED, тут тонкий момент. Я почему не хочу использовать FormData - это банальная целесообразность. Что проще, вставить клонированный файл или раздебажить сначала исходники целевого сайта, а уж затем свои файлы напрямую грузить? Конечно первый вариант проще, требует одну строку кода, а вот второй вариант может занять неопределенное время вплоть до нескольких дней. Сейчас сайты любят обмазываться фреймворками и порой не так то просто раздебажить совсем не очевидный механизм загрузки файла. Вот мне совсем не интересно под каждый новый сайт писать свой загрузчик файлов - это банально потерянное время.

Смысл мне долго-долго возится с AJAX загрузкой, когда уже есть простое рабочее решение на базе cloneNode?

[Stalker_RED]

Надим Закиров, ну если оно простое и рабочее, то вперед!
просто мне показалось, что оно не работает.

[zkrvndm]

Stalker_RED, тебе показалось) У меня куча ботов по этой модели файлы подгружает, через cloneNode, метод рабочий.

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