How to "link" blob audio file resulting from audio recording and HTML(input file) form?

Question

JavaScript

Guys, help advice.
I 'm running a Django application that takes data (photo+text_description+voice_description+music) and outputs a beautiful picture that sings :)

The essence of the problem is to record a voice on a page using a webcam and send an audio object to the server in a standard django form.

There are two ways to do this (I'm sure there are more, I just don't know about them). Either using Ajax, or somehow (here I need help) push the audio object into a standard django form (file input).

So.
As a result of voice recording, the following code is generated:

<audio controls="" src="blob:http://127.0.0.1:8000/c3b9e9ef-f81f-47e9-9001-ed92a018b4c5" id="recorded_audio"></audio>

I'm trying to extract the data (the src attribute) from the audio element and "attach" the object to the auto-generated djanga form:

<input id="id_voice_description" name="voice_description" type="file" required="">

This is where the plugging happens - I don’t know how to do it correctly (if at all possible).

I'm trying to do it like this:

var voice_description_link = $("#recorded_audio").attr("src");
$("#id_voice_description").val(voice_description_link);

I am getting the following error:

jquery-3.2.1.min.js:4 Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

Tell me how to "link" a blob audio file obtained as a result of recording audio and an HTML form generated by djanga.

PS
For voice recording I use this solution (because it's the simplest one): Demo , GitHub .

PPS
I understand that this call can be solved using FormData and Ajax, but at this stage of my development , these solutions seem complicated and 'dirty' to me, I want to leave the classic djanga form (although it may be that I first encountered Ajax ) . True, if the problem is still not solved, it will probably have to adapt.

Answer 1

You cannot script to load data into input type="file", it is read-only. You have to use AJAX.