Record audio with microphone and upload to a server

I've used ReactMediaRecorder that in turn uses Media Recorder API to record sound using the microphone and the upload to S3.

The recording part is really easy thanks to the ReactMediaRecorder (i'm using the hook version here):

const Recorder = () => {
  const {
    status,
    startRecording,
    stopRecording,
    mediaBlobUrl,
  } = useReactMediaRecorder({
    audio: true,
  });

  const isRecording = status === "recording";

  return (
    <button
      onClick={() => {
        if (isRecording) stopRecording();
        else startRecording();
      }}
    >
      {isRecording ? "recording" : "press to record"}
    </button>
  );
};

The second part is to upload the file to the server. Since we have a blobUrl we need to fetch the data first and then upload (I assume we have a function to uploadFiles):

const { uploadFile } = useCreateRecording(projectId);

useEffect(() => {
  const handleChange = async (blobUrl: string) => {
    const blob = await fetch(blobUrl).then((r) => r.blob());
    const file = new File([blob], "recording.mp4");
    await uploadFile(file);
  };

  if (mediaBlobUrl) handleChange(mediaBlobUrl);
}, [mediaBlobUrl, onChange, fileNameBase, uploadFile]);