422 Unprocessable Entity Error when sending image from Angular Frontend to FastAPI Python Backend

I have an angular frontend and an python fastAPI backend.

In the Angular frontend i send an image like this:

uploadImage(image: any) {  let formData = new FormData()  formData.append("image",image);  return this.http.post<any>(`${this.backendUrl}/upload`, formData);}

In the FastAPI Python backend i receive it like this:

@app.post("/upload/")async def read_file(file: UploadFile = File(...)):    file_contents = await file.read()    with open("test_img.jpg","wb") as f:        f.write(file_contents)    return {"filename": file.filename}

When i run the code i get a 422 Unprocessable Entity.

Why doesnt this work?