So I'm trying to make a website that record your voice, the problem is that when I send to a flask server the blob file or the blob url, my flask python code says that is no content while it is, how can I send the blob, so the server can save it as a file.

    mediaRecorder.addEventListener("stop", () => {
      const audioBlob = new Blob(audioChunks, { type: "audio/wav" })
      const audioUrl = URL.createObjectURL(audioBlob);
      const audio = new Audio(audioUrl);
      audio.play();


      var data = new FormData()
      data.append('file', audioUrl)

      fetch('http://127.0.0.1:5000/receive', {
          method: 'POST',
          body: data

      }).then(response => response.json()
      ).then(json => {
          console.log(json)
      });

and my python flask code:

@app.route("/receive", methods=['post'])
def form():
    files = request.files
    file = files.get('file')
    print(file)

    with open(os.path.abspath(f'backend/audios/{file}'), 'wb') as f:
        f.write(file.content)

    response = jsonify("File received and saved!")
    response.headers.add('Access-Control-Allow-Origin', '*')

    return response

is there a way to do it? send record blob file, download it into python?

So I'm trying to make a website that record your voice, the problem is that when I send to a flask server the blob file or the blob url, my flask python code says that is no content while it is, how can I send the blob, so the server can save it as a file.

    mediaRecorder.addEventListener("stop", () => {
      const audioBlob = new Blob(audioChunks, { type: "audio/wav" })
      const audioUrl = URL.createObjectURL(audioBlob);
      const audio = new Audio(audioUrl);
      audio.play();


      var data = new FormData()
      data.append('file', audioUrl)

      fetch('http://127.0.0.1:5000/receive', {
          method: 'POST',
          body: data

      }).then(response => response.json()
      ).then(json => {
          console.log(json)
      });

and my python flask code:

@app.route("/receive", methods=['post'])
def form():
    files = request.files
    file = files.get('file')
    print(file)

    with open(os.path.abspath(f'backend/audios/{file}'), 'wb') as f:
        f.write(file.content)

    response = jsonify("File received and saved!")
    response.headers.add('Access-Control-Allow-Origin', '*')

    return response

is there a way to do it? send record blob file, download it into python?

• javascript
• reactjs
• blob

1 Answer 1

The problem is in this line:

data.append('file', audioUrl)

you don't use FormData.append the right way. it should be:

data.append('file', audioBlob , 'file')

See documentation: https://developer.mozilla/en-US/docs/Web/API/FormData/append