@zkrvndm
Софт для автоматизации

Как вставить blob в поле выбора файла?

Это вообще возможно? Какие-нибудь окольные пути с использование расширения Chrome?

Интересует возможность вставки блоба, как файл, в реально существующий input type file.
  • Вопрос задан
  • 333 просмотра
Решения вопроса 1
@zkrvndm Автор вопроса
Софт для автоматизации
Я нащупал два решения для этой проблемы.

Первый способ позволяет вставить произвольный Blob в поле <input type="file"> и для обработчиков на целевом сайте все будет выглядеть, будто в поле реально присутствуют файлы, хотя это конечно будет не так.

Итак, функция для вставки:
// Пример функции для вставки Blob в поле input:

function pasteBlobToInput(blob, input) {
	
	// Конвертируем Blob в File:
	var file = new File([blob], blob.name);
	
	// Создаем коллекцию файлов для последующий вставки:
	var file_list = {0: file, length: 1, '__proto__': input['files']['__proto__']};
	
	// Сохраняем прототип поля:
	var proto = input['__proto__'];
	
	// Подменяем прототип для разблокировки св-ства files на запись:
	input['__proto__'] = document.createElement('div')['__proto__'];
	
	// Записываем коллекцию файлов:
	input['files'] = file_list;
	
	// Возвращаем прототип на место:
	input['__proto__'] = proto;
	
	// Выводим уведомление:
	console.log('Коллекция успешно вставлена:');
	console.dir(file_list);
	
	// Заставляем сработать обработчики на поле выбра файлов:
	input.dispatchEvent(new InputEvent('change', { bubbles: true }));
	
}

Первым параметром функции передаем Blob, а вторым элемент input куда нужно его вставить. Обратите внимание, что Blob должен иметь имя в свойстве name. Если у вас Blob без названия, то добавьте его. К сожалению, коллекция файлов способом выше создается неполноценная, но даже этой неполноценной коллекции достаточно чтобы обмануть обработчики. Я писал это решение для WhatsApp-бота и там у меня реально все работает)

Второй вариант позволяет получать полноценные коллекции файлов и далее их вставлять и использовать их где угодно. Для начала нам нужно подключить библиотеку localforage:
<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.9.0/localforage.js"></script>

Далее, мы можем выбрать файлы для коллекции и сохранить их в памяти браузера:
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('multiple', 'multiple');
input.addEventListener('change', async function() {
	var files = await localforage.setItem('files', this.files);
	console.log('Коллекция файлов успешно сохранена:');
	console.dir(files);
});
input.click();

Сохраненную коллекцию мы позднее сможем использовать даже после перезагрузки страницы или закрытия / открытия браузера. Для извлечения сохраненной коллекции достаточно выполнить:
var files = await localforage.getItem('files');
console.log('Коллекция файлов успешно извлечена:');
console.dir(files);

Эта коллекция полноценная и мы легко можем ее прицепить в любое поле:
var files = await localforage.getItem('files');
document.querySelector('input[type="file"]').files = files;

При этом файлы в поле будут выглядеть точно так же, будто выбраны с компа, никаких отличий.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
зачем его в input вставлять? отправляй сразу запрос минуя форму

А если нужно именно создание файла, то https://gist.github.com/dreamyguy/6b4ab77d2f118adb...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы