Надим

Обратите внимание, что превью на прокрутке видно даже тогда, когда само видео ещё не загружано полностью... я думаю вы догадываетесь, что картинки генерируются отнюдь не в браузере?

Вы можете легко скриншотить содержимое любого html-элемента, используя для этого canvas:
https://html2canvas.hertzen.com/

Нашел решение. Оказывается, существует событие paste, которое происходит, когда мы вставляем что-то в блок. Соответственно, можно повесить обработчик на него, отменить действие по умолчанию, а затем перехваченный текст обработать как душе угодно:

document.querySelector('div[contenteditable="true"]').addEventListener("paste", function(e) {
        e.preventDefault();
        var text = e.clipboardData.getData("text/plain");
        document.execCommand("insertHTML", false, text);
});

Я нащупал два решения для этой проблемы.

Первый способ позволяет вставить произвольный 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;

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

Вы можете использовать для вывода alertyfy. Пролистайте до Default Notifications и нажмите Run Example несколько раз, для просмотра демо.

Используйте JavaScript.

Иконку позиционируйте абсолютно относительно строки, самой строке дайте отступ слева равный ширине иконки.