Passing a .wav blob from Angular to FastApi endpoint - 422 (Unprocessable Entity)

Question

I am trying out a use case where am sending a blob(.wav) (short audio recorded via Angular) to a FastAPI end point for further processing. I am trying with the UploadFile option on FastApi and it is giving me a 422 (Unprocessable Entity) error.

Angular code

processRecording(blob:any) {
        const formData = new FormData();
        console.log("Form Data with audio file:",formData);
        formData.append('recording',blob);
        this.httpClient.post<any>("http://127.0.0.1:8000/postAudio",formData).subscribe(
          (response) => {
            console.log("Response received :", response);
          },
          (error) => {
            console.log("Error received :", error)
          }

Python code

@app.post("/postAudio")
async def postAudio(file:UploadFile = File(...)):
    print("Audio received!");
    return {'filename':file.filename}

I tried directly providing the blob as a post parameter and that also gave me the same error. May I please get direction on where I might be going wrong? Thank you

score 0 · Answer 1 · answered Feb 01 '23 at 03:33

I was able to resolve it by matching the filename provided with the formData.append angular command with the file name provided as a part of the python postAudio function.

Earlier - async def postAudio(file:UploadFile = File(...)):

Post Update - async def postAudio(recording:UploadFile = File(...)):

.i.e file replaced with recording as that is used when the file is being appended to formData from Angular code. "formData.append('recording',blob);"

Passing a .wav blob from Angular to FastApi endpoint - 422 (Unprocessable Entity)

1 Answers1