Как временный файл средствами js поместить в input type=file?

Question

[Moshiwa]

Реализовал запись звука на сайте, после остановки записи файл сохраняется во временное хранилище. Как этот файл отправить в форму? Пробовал ajaxом отправлять сразу на сервер, но это не совсем то что мне нужно.

Answer 1

[zkrvndm]

Предположим в переменной blob лежит ваш звуковой файл, тогда вставить его в поле можно вот так:

// Создаем коллекцию:
var dt  = new DataTransfer();
dt.items.add(new File([blob], 'FileName.wav', {type: blob.type}));
var file_list = dt.files;

console.log('Коллекция файлов создана:');
console.dir(file_list);

// Вставим созданную коллекцию в реальное поле:
document.querySelector('input[type="file"]').files = file_list;

Если у вас формат звука не .wav, замените название файла на правильный.

Answer 2

[Алексей Ярков]

Пробовал ajaxом отправлять сразу на сервер, но это не совсем то что мне нужно

Это именно то что нужно. Так как вы хотите - не работает.

Comments

[Moshiwa]

Но вроде как способ добавить файл в input[0].files есть, но можно ли временный файл туда сунуть

[zkrvndm]

Moshiwa, можно. Вы ваш звуковой файл в каком виде получайте? Это Blob?

[Moshiwa]

Надим Закиров, да это блоб

[zkrvndm]

Moshiwa, предположим в переменной blob лежит ваш звуковой файл, тогда вставить его в поле можно вот так:

// Создаем коллекцию:
var dt  = new DataTransfer();
dt.items.add(new File([blob], 'FileName.wav', {type: blob.type}));
var file_list = dt.files;

console.log('Коллекция файлов создана:');
console.dir(file_list);

// Вставим созданную коллекцию в реальное поле:
document.querySelector('input[type="file"]').files = file_list;

Если у вас формат звука не .wav, замените название файла на правильный.

[Moshiwa]

Надим Закиров, пробовал кодировать в base64 Надим Закиров, спасибо, сейчас сделал тоже самое, все Окей то что нужно. Ещё раз спасибо

[zkrvndm]

Moshiwa, все же объясните мне, зачем вам вставлять звуковой файл в поле? Если для загрузки на сервер или для скачивания себе на комп, то это можно сделать и без вставки в поле.

[Moshiwa]

Надим Закиров, Извините за запоздалый ответ. У меня в рамках задачи необходимо было реализовать отправку аудиофайлов на wa. В форме отправки были поля для текста, документов и аудиофайлов, если текст и документы сохранялись в форме, то аудиофайл отправлялся на сервер и сохранялся после окончания записи
Проблемы:

• Аудиофайл сохранялся, но сообщение могло не отправиться по решению пользователя
  
• При сохранении аудиофайла, создавалось пустое поле сообщений так как эти таблицы связаны по behavior
  
• Необходимо писать отдельный метод в контроллере для обработки аудиофайла
  

Из-за этих проблем я решил, что стоит сохранять аудиофайл вместе с остальными данными.

[zkrvndm]

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

Допустим у вас имеется форма с id равным alfa, тогда отправить эту форму аяксом можно так:

async function sendForm() {
	
	// Получаем элемент с формой, которую нужно отправить:
	var form_element = document.querySelector('form#alfa');
	
	// Создаем новую форму в конструкторе:
	var form_data = new FormData(form_element);
	
	// Добавляем к созданной форме аудио из блоба:
	form_data.append('audio', blob, 'AudioName.wav')
	
	// Отправляем форму на сервер без перезагрузки текущей страницы:
	
	var response = await (await fetch('https://yousite.ru/handler.php', {
		method: 'POST',
		body: form_data
	})).text();
	
	// Выводим ответ сервера в консоли:
	console.log("Ответ сервера: " + response);
	
}

Для отправки формы достаточно вызывать sendForm() - разумеется в переменной blob должно лежать ваше аудио.

[Moshiwa]

Надим Закиров, я правильно понял, что при отправки формы, мы ко всему этому, совершим еще и ajax на тот же метод?

[zkrvndm]

Moshiwa, нет, метод запроса нужно прописать самому: GET / POST / PUT / DELETE.

Но обычно формы отправляются POST-запросом.