Trying to send a wav file from JS script but get Error 422: Unprocessable entity

[kareemamrr]

Backend

model = Model()
app = FastAPI()

origins = ["http://127.0.0.1:5500", "http://127.0.0.1:8000"]
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.post("/save")
def save(file: UploadFile = File(...)):
    audio_bytes = file.file.read()
    signal, sr = sf.read(io.BytesIO(audio_bytes))
    return f'{sr}'

Frontend

function sendData(file) {
    const XHR = new XMLHttpRequest();
    FD = new FormData()

    // FD.append("username", "kareem");
    FD.append('uploadedfile', file, 'uploadedfile');
    XHR.open('POST', "http://127.0.0.1:8000/save", true);
    XHR.send(FD);

Description

• The file argument in the js part is actually a blob which contains wav audio recorded from the browser.
• The backend is supposed to recieve the data but it throws Error 422: Unprocessable entity.
• It works fine however when pushing directly a wav file say through Postman to the endpoint.

Environment

• OS: Linux
• FastAPI version: 0.61.1
• Python version: 3.8.2

[ycd]

Hmmm, the API form data expects a key named file, but on your frontend side, you're sending it as uploadedfile.

Can you try changing it to file?

[kareemamrr]

Thank you.

[tiangolo]

Thanks for the help here @ycd ! 👏 🙇

Thanks for reporting back and closing the issue @kareemamrr 👍