Как загрузить видео по url у input[type="file"]?

Question

[Bla Bla]

Есть кнопка инпут которая принимает файлы, но чтобы загрузить файлы нужно соответственно нажать на инпут и выбрать файл с компьютера, но можно ли напрямую загрузить видео через url?
Это может выглядеть примерно так:

const inputVideo = document.querySelector("#input");
inputVideo.src = "https://televisor.tlgrm.dev/003/9BcAAFOCfUwtolU7I58cNw.pQ4AAHAZQUuiSdmTs4mwWAI.Akx9glMAABf0YGgFzjKL2yt93J4URAF3xcbRfIM/file.mp4?hash=-lLXQ3k90g-aQECSW4i-bg&ts=1617430321";

<input type="file" accept="video/*" id="input"/>

Answer 1

[Надим]

Набросал вам небольшую функцию для вставки файла в поле по ссылке:

// Функция для вставки файла в поле input:

async function setFile(input, name, url) {
	try {
		var blob = await (await fetch(url)).blob();
		var dt  = new DataTransfer();
		dt.items.add(new File([blob], name, {type: blob.type}));
		input.files = dt.files;
		console.log('Файл успешно вставлен:');
		console.dir(input.files);
		return true;
	}
	catch(err) {
		console.log('Ошибка при вставке файла:');
		console.dir(err);
		return false;
	}
}

Первым параметром в функцию передаёте ссылку на само поле, вторым параметром желаемое название для файла, а третьим параметром ссылку на файл. Например:

// Входные параметры:
var input_element = document.querySelector('input[type="file"]');
var file_name = 'Мое музло.mp3';
var file_link = 'https://ваш-сайт.рф/music.mp3';

// Вызовем функцию для вставки файла:
setFile(input_element, file_name, file_link);

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

Дополнительная информация

Также вместе третьего параметра можно передавать не ссылку на файл, а уже сам файл в представлении base64 - это когда файл конвертируется в длинный-длинный зашифрованный текст. Чтобы перегнать какой-нибудь файл в base64, вы можете использовать онлайн сервисы, вам наверное так будет проще всего.

Только зачем так заморачиваться, если можно просто положить файл внутри своего сайта и при вставке банально указывать ссылку на него?

Comments

[Bla Bla]

A скачать файл в виде Blob это значит скачать файл на ПК или может сделать блоб ссылку (blob:https://...)

[Надим]

Bla Bla, можно разместить видео в теле страницы в кодировке base64, тогда ничего не нужно будет скачивать. Единственное НО, допустим была у вас страница test.html размером в 2 Кб, а станет весить несколько мегабайт, смотря насколько видео большое.

[Bla Bla]

Спасибо, а можно пример или силку на пример как что-то подобное сделать.

[Надим]

Bla Bla, можно, но не сегодня. Напомните о себе завтра, отпишу пример.

[Bla Bla]

Надим Закиров, спасибо хорошо.

[Надим]

Bla Bla, ответил, перечитайте мой изначальный ответ, там все есть.

[Bla Bla]

Спасибо, и да это не для моего сайта, а это для постов в фейсбук чтобы не дублировать. Я использовал ваше решение и так в input грузится файл через url, классно, но насколько я понял он не тригериться и поэтому не срабатывают другие функции (отправить пост). А то можно прикрутить ему триггер.

[Надим]

Bla Bla, используйте dispatchEvent на поле, чтобы страница увидела добавленный файл.