For some reason when I send Audio Data through FormData fetch requests from the frontend to my flask backend I get a 400 error. I am struggling to debug.

This is the fetch call:

fetch("/api/transcribe", {
        method: "POST",
        headers: {'Content-Type':'multipart/form-data'},
        body: audioFormData
    }).then(
        res => res.json()
    ).then(
        data => setTranscription(data)
    )

This is the flask api:

@app.route("/api/transcribe", methods=['POST'])
def transcribe():
    audioPath = "audio-notes-data-2.mp3"
    with open(audioPath, "wb") as file:
        file.write(request.files['file'])
    model = whisper.load_model("base")
    result = model.transcribe(audioPath)
    return result["text"]

When I debugged and printed out request.files I got an empty ImmutableMultiDict([]). This was very surprising because you can clearly see from the attached image that I have attached a file.

Also, this is how the audioFormData object was created:

const file = new File([audioBlob], "recording.mp3")
const formData = new FormData();
formData.append('file', file);

Also I have tested my backend with postman and it works as expected. So the problem must be with the fetch request.

Any advice would be appreciated