FastAPI returns “Error 422: Unprocessable entity” when I send multipart form data with JavaScript Fetch API

by

The 422 error response body will contain an error message about which field(s) is missing or doesn’t match the expected format. Since you haven’t provided that (please do so), my guess is that the error is triggered due to how you defined the images parameter in your endpoint. Since images is expected to be a List of File(s), you should instead define it using the File type instead of Form. For example:

images: List[UploadFile] = File(...)
                           ^^^^

When using UploadFile, you don’t have to use File() in the default value of the parameter, meaning that the below should work as well:

images: List[UploadFile]

Hence, the FastAPI endpoint should look similar to this:

@app.post("/user/register")
async def register_user(name: str = Form(...), images: List[UploadFile] = File(...)):
    pass

In the frontend, make sure to use the body (not data) parameter in the fetch() function to pass the FormData object (see example in MDN Web Docs). For instance:

var nameInput = document.getElementById('nameInput'); 
var imagesInput = document.getElementById('imagesInput');

var formData = new FormData();
formData.append('name', nameInput.value);
for (const file of imagesInput.files)
    formData.append('images', file);

fetch('/user/register', {
      method: 'POST',
      body: formData,
   })
   .then(response => {
      console.log(response);
   })
   .catch(error => {
      console.error(error);
   });

Please have a look at this answer, as well as this answer, which provide working examples on how to upload multiple files and form data to a FastAPI backend, using Fetch API in the frontend.

As for manually specifying the Content-Type when sending multipart/form-data, you don’t have to (and shouldn’t) do that, but rather let the browser set the Content-Type—please take a look at this answer for more details.

More Related Contents:

  1. How to redirect the user to another page after login using JavaScript Fetch API?
  2. How do I download a file from FastAPI backend using Fetch API in the frontend?
  3. Cannot Upload File to FastAPI backend using JavaScript Fetch API in the frontend
  4. How do I download a file from FastAPI backend using JavaScript Fetch API in the frontend?
  5. How to render Streamable image on React coming from FastAPI server?
  6. FastAPI is not returning cookies to React frontend
  7. How to send a base64 encoded image to a FastAPI backend?
  8. React Native fetch() Network Request Failed
  9. Get page generated with Javascript in Python
  10. How do I post form data with fetch api?
  11. Executing Javascript from Python
  12. fetch resolves even if 404?
  13. fetch(), how do you make a non-cached request?
  14. POST Request with Fetch API?
  15. Update and render a value from Flask periodically
  16. Python while loop conversion to Javascript [duplicate]
  17. Best way to integrate Python and JavaScript?
  18. fetch() unexpected end of input
  19. Javascript – No ‘Access-Control-Allow-Origin’ header is present on the requested resource
  20. JavaScript function similar to Python range()
  21. How do I recover the “text” from the page originating the alert, esp **after** the human user has *clicked* [dismiss] on the page’s **alert**?
  22. Cannot load Deezer API resources from localhost with the Fetch API
  23. An error has occured in ‘site url’: Uncaught TypeError: Cannot read property ‘getColomnSet’ of undefined with Selenium and Python
  24. Is there an __repr__ equivalent for javascript?
  25. Hide 401 console.error in chrome dev tools getting 401 on fetch() call [duplicate]
  26. how to process fetch response from an ‘opaque’ type?
  27. fetch retry request (on failure)
  28. UseEffect being called multiple times
  29. Return data from html/js to python
  30. How to use the variables from “views.py” in JavasScript, “” in Django Template?

Leave a Comment