Sentry Answers>FastAPI>

Upload multiple files to FastAPI endpoint using JavaScript

Upload multiple files to FastAPI endpoint using JavaScript

David Y.

—

The Problem

I’m having problems with the web frontend for a FastAPI endpoint that accepts a list of image files. When I attempt to upload the files, I receive the following error:

Click to Copy
Error 422: Unprocessable entity

Here’s the code for my FastAPI endpoint:

Click to Copy
@app.post("/new-album")
def new_album(name: str = Form(...), images: List[UploadFile] = Form(...)):
    # ... process images ...
    return {"Message": f" Album {name} created with {len[images]} images."}

Here’s my client-side JavaScript:

Click to Copy
function create_album() {
  var albumNameInput = document.getElementById('albumNameInput');
  var imagesInput = document.getElementById('imagesInput');

  var formData = new FormData();
  formData.append('name', albumNameInput.value);
  formData.append('images', imagesInput.files[0]);

  fetch('/new-album', {
    method: 'POST',
    body: formData,
  })
  .then(response => response.json());
}

document.querySelector("form").addEventListener("submit", create_album);

Since I’m uploading files, I’ve tried to add the header Content-Type: multipart/form-data to my request, but that just produces this error instead:

Click to Copy
Error 400: Bad Request

What am I doing wrong and how can I get this working?

The Solution

On the endpoint, the default value of images is set to Form(...), when it should be File(...). This can also be left out when using UploadFile as per FastAPI’s documentation. So we can change the endpoint code as follows:

Click to Copy
@app.post("/new-album")
def new_album(name: str = Form(...), images: List[UploadFile]): # removed default value for images
    # ... process images ...
    return {"Message": f" Album {name} created with {len[images]} images."}

The second issue is with the frontend JavaScript: only the first image file is being uploaded. This will cause an error because we’re sending a single file to the /new-album endpoint that expects a list of files. To fix this change the code as follows:

Click to Copy
function create_album() {
  var albumNameInput = document.getElementById('albumNameInput');
  var imagesInput = document.getElementById('imagesInput');

  var formData = new FormData();
  formData.append('name', albumNameInput.value);

  for (const file of imagesInput.files) { // new for loop adds all files to images list
    formData.append('images', file);
  }

  fetch('/new-album', {
    method: 'POST',
    body: formData,
  })
  .then(response => response.json());
}

document.querySelector("form").addEventListener("submit", create_album);

When sending form data that includes files with JavaScript’s fetch API, we should avoid manually setting the Content-Type header, as this will prevent the browser from formatting the request correctly, per the documentation.

  • Syntax.fmListen to the Syntax Podcast
  • Community SeriesIdentify, Trace, and Fix Endpoint Regression Issues
  • ResourcesBackend Error Monitoring 101
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
© 2024 • Sentry is a registered Trademark of Functional Software, Inc.