convert wav file received in the request response to blob

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.

Answer

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'

Advertisement

Answer