Unprocessable Entity when uploading from Angular to Fast API

Question

I am trying to send formData with an image from angular to fast API but am unable to process further because of the following error.

loc:(2)['body', 'file']
msg: "field required"
type: "value_error.missing"

This is how my code looks like FastApi:

@app.post('/register')
async def register_user(user: UserData = Depends(), image: UploadFile = File(...)):
    ...

Angular:

registerUser(query: any,image:any) {
    
    const formData:FormData = new FormData();
    formData.append('image', image,image.name);
    for (const key in query) {
        const element = query[key];
        formData.append(key, element);
    }
  
    return this.httpClient.post<any>(`${environment.apiBaseUrl}/register`, formData).pipe(map(res => {
      return res;
    }));
  }

but still, I am getting 422 (Unprocessable Entity)