UPDATE: I found a few minor errors in this post, which have been fixed and resolved some of the issues. The other half of the problem is addressed in the accepted answer.
...
I am currently capturing microphone audio on the client side (using Nuxt/Vue) and my goal is to transfer it to my backend (Strapi). I have a MediaRecorder set up, which adds the data to my recordingFile array when the recording stops. This part is functioning correctly, as I can play back the recording using the embedded player after it is finished.
Here is the HTML snippet:
<audio
id="localaudio"
..
></audio>
JavaScript code:
recorder = new MediaRecorder(mediaStream);
...
recorder.addEventListener("dataavailable", function(e) {
document.querySelector("#localaudio").src = URL.createObjectURL(e.data); //add it to the player element on the page for playback
recordingFile.push(e.data); // pushing to array recordingFile
});
However, I am encountering problems when attempting to upload the audio to my Strapi backend. I suspect the issue lies in trying to upload a blob when Strapi is expecting a file.
let blob = new Blob(recordingFile, { type: "audio/ogg" });
const data = {
"user" : "test",
"files.File" : blob //prefix is Strapi convention
};
const formData = new FormData();
formData.append('data', JSON.stringify(data));
axios({
method: "post",
url: "http://localhost:1337/recordings",
data: formData,
headers: {
"content-type": `multipart/form-data;`
}
})
I get a positive response and a new entry with user="test", but the file field remains empty. I attempted sending the file URL (URL.createObjectURL(..)) instead of the blob itself, but it did not work either.
I am referencing the Strapi documentation, but it primarily deals with files from the filesystem, not blobs generated in the browser.
Any insights?
UPDATE: recording.settings.json:
{
"kind": "collectionType",
"collectionName": "recordings",
"info": {
"name": "Recording"
},
"options": {
"increments": true,
"timestamps": true,
"draftAndPublish": true
},
"attributes": {
"File": {
"model": "file",
"via": "related",
"allowedTypes": [
"images",
"files",
"videos"
],
"plugin": "upload",
"required": false
},
"name": {
"type": "string"
}
}
}