У меня есть форма Rails с полем файла, указывающим на ActiveStorage. Используя API MediaRecorder (и polyfill для Safari), я также создал аудио-рекордер.
Пока все хорошо: записанный звук можно прикрепить к элементу <audio> и воспроизвести до отправки формы. Как вы видите ниже, код добавляется в виде двоичного объекта в тег <audio>.
<audio controls="" data-target="audio-player.player" preload="true" src="blob:http://localhost:3000/5bb2e66f-afc0-6a46-b3f5-a95564afca55"</audio>
Форма также позволяет регулярно загружать аудиофайл, который работает и хранится с использованием ActiveStorage, как определено:
has_one_attached :audio_file
Теперь я хочу отправить всю форму, включая аудио, в Rails. Проблема в том, что невозможно напрямую установить file_field из-за ограничений безопасности браузера.
Итак, я пытаюсь обойти это: захватить форму submit, сериализовать ее и POST с fetch. Это также работает (форма нужна remote: true), теперь единственное, чего не хватает, это снова аудио.
Рабочий обратный вызов:
var form = self.fileFieldTarget.form;
form.addEventListener('submit', function(e){
e.preventDefault();
fetch(e.target.action, {
method: 'POST',
body: new URLSearchParams(new FormData(e.target))
}).then((resp) => {
console.log(resp);
});
});
вижу два варианта:
1) Каким-то образом добавьте закодированный звук в форму json, и он будет обрабатываться как объект ActiveStorage, а затем он будет отправлен вместе.
2) Сделайте отдельный вызов, чтобы загрузить только аудио, после сохранения оставшейся части формы
Если какой-то HTML / JS выглядит немного странно, я оборачиваю все это в StimulusJS. Я рад поделиться всем кодом аудиозаписи, если хотите.
