convert wav file received in the request response to blob

Viewed 815

I am trying to receive a WAV file as the response to a POST request. I use the send_file in Flask. I try to retrieve the file client-side in the response. I have ultimately converted it to a blob so it can be automatically downloaded.

This is the API code for the server:

@app.route('/drums', methods = ['GET', 'POST'])
@cross_origin()
def upload_drums():
   if request.method == 'POST':
      f = request.files['file']
      f.save(secure_filename(f.filename))

      test_run()

      return send_file('C:/Users/Titus/Separation/results/dsd/music.wav', mimetype="audio/wav")

This is the client script for the post request:

getDrum(event: any) {

  event.preventDefault();
  let file = this.state.file;
  const formData = new FormData();

  const blob = file as Blob;
  formData.append("file", blob);

  axios
    .post("http://localhost:5000/drums", formData)
    .then((res: any) => {
      console.log(res);
      const url = window.URL.createObjectURL(new Blob(res.data, { 'type' : 'audio/wav' }));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'foo.wav'); //or any other extension
      document.body.appendChild(link);
      link.click();
    })
    .catch((err: any) => console.warn(err));
}

I get "provided value cannot be converted to a sequence" error from trying to convert res.data to a WAV blob. The file is successfully received, and a valid file is sent back.

Creating the blob with [res.data] instead of res.data actually downloads the file, but the file can't be played (it's corrupt). I suspect the data from the response must be in binary.

1 Answers

when you make the request you have to be specific about the format you want to be returned, add this option to axios call:

responseType: 'blob'
Related