Как получить Blob из input[type="files"]?

Question

[zkrvndm]

Хочу к сконструированной форме прицепить файл:

var formData = new FormData();
... // Тут создаю нужные мне поля
formData.append("file", Blob, "test.mp3");

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

Answer 1

[Дмитрий Беляев]

https://developer.mozilla.org/ru/docs/Web/API/File
File унаследован от Blob

Comments

[zkrvndm]

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

var formData = new FormData();
var file_obj = document.querySelector('input[type="file"]').files[0];
formData.append("file", file_obj, "test.mp3");

И я так понимаю из коллекции файлов, вполне можно выбрать и прицепить только нужные?

[Дмитрий Беляев]

Надим Закиров, все верно, по сути файлы - те же blob'ы просто с доп полями вроде имени файла в файловой системе пользователя

[zkrvndm]

Дмитрий Беляев, огромное спасибо) Ваш ответ избавил меня от многочасовых поисков в интернете, так как на первых страницах Яндекса ответа на свой расплывчатый вопрос я не нашел, а точнее сформулировать не мог, так как не знал, что спрашивать.

[Дмитрий Беляев]

Надим Закиров, я всегда начинаю поиск по интересующему меня web-api с запроса "mdn <название api>", например "mdn File"
mdn - самый полный справочник по js и web-api, к тому же многое переведено на русский.

[zkrvndm]

Дмитрий Беляев, интересно, буду иметь в виду) Совет полезный.

Answer 2

[Андрей Пастухов]

А зачем именно Blob?

const file = document.querySelector('input[type="files"]').value;
formData.append("file", file, "test.mp3");

Comments

[zkrvndm]

Если так можно, как указали вы, то это решает мою проблему) Просто в документации указано, что передавать вторым параметром надо именно Blob, вот и понять не могу, как его получить.