send blob to server

[arezooalipanah]

hi Thanks for creating this package Where do I access the blob itself? How can I send the blob as file to the server?

[satyajitghana]

const audioBlob = await fetch(mediaBlobUrl).then(r => r.blob());

and send it to server like this

            const audiofile = new File([audioBlob], "audiofile.webm", { type: "audio/webm" })

            console.log(audiofile);

            const formData = new FormData();

            formData.append("file", audiofile);

            const result = await axios.post(
                `<your server post end point>`,
                formData,
                {
                    crossDomain: true,
                }
            )

[liadbelad]

const audioBlob = await fetch(mediaBlobUrl).then(r => r.blob());

Hey I tried to implement this part as follows but I can't get the blob what am I doing wrong please ? I am trying to call the getBlob function but I can't find a place where to call it properly

import React from "react"; import { ReactMediaRecorder } from "react-media-recorder";

export default function UserRecord() { const getBlob = async (mediaBlobUrl) => { const audioBlob = await fetch(mediaBlobUrl).then((r) => r.blob()); console.log(audioBlob); };

return ( <ReactMediaRecorder audio render={({ status, startRecording, stopRecording, mediaBlobUrl }) => (

{status}

<button onClick={startRecording}>Start Recording <button onClick={stopRecording}>Stop Recording

)} /> ); }

[manzurola]

@liadbelad I had it done by hooking onto the onStop event, where the complete blob is supplied. Supply the function pointer when creating the react hook, and in your onStop method you should have the URL and BLOB.

[chuckthepiranha]

Adding onto what @manzurola said, you can just do the following and that way you don't have to do fetch:

 <ReactMediaRecorder
onStop={(blobUrl, blob) => { console.log(blob); } }
... />

[agusabreuc]

I'm having problems to hook the onStop event, can somebody help me plesas?

@liadbelad I had it done by hooking onto the onStop event, where the complete blob is supplied. Supply the function pointer when creating the react hook, and in your onStop method you should have the URL and BLOB.

[wapmastaz]

This doesn't work when posting to server, i get the file as text and not file

blob:http://localhost:5173/4ba49844-5cb3-47dc-b309-b1c5ed104e00