Как сохранить blob файл на сервер при отправке формы?

Question

[Aljo]

Здравствуйте!

Есть форма

<form enctype="multipart/form-data" action="" method="post" class="create-form">
<input type="hidden" name="author" value="{$user.uid}">
<audio class="audio-player" controls="" src="blob:https://site.ru/ca854ba4-af79-4a4a-834f-ac8f009ebd01" autoplay=""></audio>
<button type="submit">Сохранить</button>
</form>

Можно ли как-то при отправке формы, сохранить blob-файл с тега аудио на сервер?

Comments

[Дмитрий]

Киньте ссылку на файл в другое скрытое поле и заберите в обработчике

[Aljo]

Дмитрий, я так пробовал. Создал скрытый input и передал в него ссылку на blob. А как теперь по этой ссылке сохранить то его?

[Дмитрий]

Aljo, https://www.php.net/manual/ru/function.curl-init.php
https://www.php.net/manual/ru/function.file-get-co...
https://www.php.net/manual/ru/function.copy.php

[Aljo]

Дмитрий, пробовал все способы и curl и file_put_contents и copy - файл сохраняет, но поврежденный. Если я в браузере просто перейду по ссылке и сохраню файл, то он нормально открывается.

[Дмитрий]

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

[Aljo]

Дмитрий, лол, а он пустой оказывается...

[Дмитрий]

Aljo, посмотреть через панель разработчика что в арбузере за заголовки кидает на загрузку файла

[Aljo]

Дмитрий, Content-Length и Content-Type: audio/mpeg-3

[Дмитрий]

Aljo, я про редиректы

[Aljo]

Дмитрий, нет никаких редиректов в network

[Дмитрий]

Aljo, а вы blob из ссылки убрали?

Answer 1

[Aljo]

Сделал так:

async function createFile(){
            let response = await fetch(uri);
            let data = await response.blob();
            let metadata = {
              type: 'audio/mpeg-3'
            };
            let file = new File([data], "questionAudio.mp3", metadata);
            const formData = new FormData();
            formData.append('audio-file', file);            
            formData.append('action', 'sendBlob');
            return $.ajax({
                url: document.location.href,
                data: formData,
                processData: false,
                contentType: false,
                type: 'POST',
                success: function(data){
                var res = JSON.parse(data, true); 
                resField.val(res);
                }
            });
          }
        createFile();

Answer 2

[Надим]

Чтобы это сделать, надо переписать отправку формы на JavaScript.
Пример кода, чтобы форма отправлялась при помощи fetch без перезагрузки страницы:

<script>
	
	document.addEventListener('DOMContentLoaded', function() {
		
		document.querySelector('form.create-form').addEventListener('submit', async function() {
			
			var form = this;
			
			event.preventDefault();
			
			var audio = await (await fetch(form.querySelector('audio').src)).blob();
			
			var form_data = new FormData(form);
			form_data.append('file', audio, 'FileName.mp3');
			
			var response = await (await fetch(form.action, {
				method: 'POST',
				body: form_data
			})).text();
			
			console.log('Ответ сервера:', response);
			
			form.outerHTML = 'Ответ сервера:<br>' + response;
			
		});
		
	});
	
</script>

Comments

[Aljo]

Спасибо, попробую. Это получается blob в итоге будет в массиве $_FILES?

[Надим]

Aljo, да.