Я нащупал два решения для этой проблемы.
Первый способ позволяет вставить произвольный
Blob в поле
<input type="file">. Итак, способ создания коллекции файлов
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;
Можно просто пересоздать коллекцию, если надо что-то удалить из поля.
Второй вариант позволяет получать заранее подготовленные коллекции файлов и далее их вставлять и использовать их где угодно. Для начала нам нужно подключить библиотеку
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;
При этом файлы в поле будут выглядеть точно так же, будто выбраны с компа, никаких отличий.
