title: Sending Audio Blob data from a React frontend to a Express backend
body: <p>so I am running into an issue with sending audio(created in the browser) to my backend to be stored in a database. I am using React on the Front-end and using the Web Audio API to allow a user to create audio. When I send it, the backend just receives an empty object. Does anyone know how I can get the data to persist so that it can be stored in the database to be played later? </p>
  
  <pre><code>mediaRecorderOnStop() {
      console.log("data available after MediaRecorder.stop() called.");
      const clipName = prompt('Enter a name for your sound clip?', 'My unnamed clip')
  
      //creating new blob object
      const blob = new Blob(this.state.chunks, { 'type': 'audio/ogg; codecs=opus' });
  
      //sending data to the backend
      uploadDocumentRequest(this.props.createClip(blob, clipName))
  
      this.setState({
          chunks: []
      })
      console.log("recorder stopped");
  }
  
  //makes a api post request to server
  export function uploadDocumentRequest(data) {
      axios.post('/api/createAudio', data)
          .then(response =&gt; console.log(uploadSuccess(response)))
          .catch(error =&gt; console.log(uploadFail(error)));
  </code></pre>
  
  <p>} </p>
  
  <p><a href="https://i.stack.imgur.com/TNmEP.png" rel="nofollow noreferrer">Here is an image of my code</a></p>