How to pass a List of strings as FormData to FastAPI using JavaScript Fetch API?

Question

This is the Next.js frontend:

// Create FormData to send files, URLs and username to the API
const formData = new FormData();

if (files && files.length > 0) {
    files.forEach((file) => {
        formData.append('files', file);
    });
} else {
    const emptyBlob = new Blob([''], { type: 'application/pdf' });
    formData.append('files', emptyBlob, 'empty.pdf');
}

formData.append('urls', JSON.stringify(validUrls ?? ["https://example.com"])); // always append something

if (user) {
    formData.append('username', user.sub);
}
try {
    console.log("FormData keys:");
    for (const pair of formData.entries()) {
        console.log(pair[0], pair[1]);
    }

    const response = await fetch('/api/add_document_to_knowledge_base', {
        method: 'POST',
        body: formData,
    });

This is the FastAPI backend:

@app.post("/add_document_to_knowledge_base/", response_model=APIResponse)
async def add_documents_to_knowledge_base(
    request: Request,
    files: List[UploadFile] = File(...),
    urls: Optional[str] = Form(None),
    username: Optional[str] = Form(None),
    token: str = Depends(verify_token),
):
    print("=== RAW REQUEST DUMP ===")
    form = await request.form()
    for key, value in form.items():
        print(f"{key}: {value}")
    """
    Upload and process multiple documents; each doc is parsed, chunked and added to the vector DB.
    """
    try:
        print("USER", username)
        print("URLs", urls)
        print("FILES", files)

        parsed_urls: List[str] = json.loads(urls) if urls else []
        print("Parsed URLs", parsed_urls)

When I send the request from the frontend, I can see that it is logged correctly in the console and that there are URLs in the array, such as:

urlsss ["https://mail.google.com/mail/u/0/#inbox"]
VM2480 KBPageFileProcessor.jsx:238 username auth0|68156591d0d1ef36e79e

But, in the backend, the urls list prints None (i.e., it is empty), even though the files and username fields are received correctly.

You can see that urls are not even there in the request body:

=== RAW REQUEST DUMP ===
files: <starlette.datastructures.UploadFile object at 0x16be31280>
username: auth0|68156591d0d1ef36e79e7961
USER auth0|68156591d0d1ef36e79e7961
URLs None
FILES [<starlette.datastructures.UploadFile object at 0x16be31280>]
Parsed URLs []
INFO:httpx:HTTP Request: POST

Any idea why is this happening, or any alternatives that would fix this issue?

Why is it printed as urlsss in the console of the frontend app? — Yurii Motov
– Yurii Motov, Commented May 9 at 9:56

Chris · Accepted Answer · 2025-06-26 04:06:49Z

The issue is that your endpoint (the way that is defined) is expecting a single str for the urls parameter instead of a List of strings. Below is a working example, demonstrating on how to upload both files and a List of strings (namely urls in your case). Please refer to this answer and this answer for more details and examples.

Working Example

main.py

from fastapi import FastAPI, Form, File, UploadFile, Request
from typing import List, Optional
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates

app = FastAPI()
templates = Jinja2Templates(directory="templates")


@app.post("/submit")
async def submit(
    files: List[UploadFile] = File(...),
    urls: Optional[List[str]] = Form(None)
):
    return {
        "Filenames": [file.filename for file in files],
        "urls": urls
    }
    

@app.get('/')
async def index(request: Request):
    return templates.TemplateResponse(request=request, name="index.html")

templates/index.html

<!DOCTYPE html>
<html>
   <body>
      <form id="myForm" >
         URL 1 : <input type="text" name="urls" value="https://stackoverflow.com"><br>
         URL 2 : <input type="text" name="urls" value="https://stackexchange.com"><br>
      </form>
      <label for="fileInput">Choose file(s) to upload</label>
      <input type="file" id="fileInput" onchange="reset()" multiple><br>
      <input type="button" value="Submit" onclick="submitUsingFetch()">
      <p id="resp"></p>
      <script>
         function reset() {
            var resp = document.getElementById("resp");
            resp.innerHTML = "";
            resp.style.color = "black";
         }
         
         function submitUsingFetch() {
            var resp = document.getElementById("resp");
            var fileInput = document.getElementById('fileInput');
            if (fileInput.files[0]) {
               // for passing the urls through HTML <form>
               var myForm = document.getElementById('myForm');
               var formData = new FormData(myForm);
               
               // for passing the urls without HTML <form>:
               /*var formData = new FormData();
               formData.append('urls', "https://stackoverflow.com");
               formData.append('urls', "https://stackexchange.com");*/
               
               for (const file of fileInput.files)
                  formData.append('files', file);
               
               fetch('/submit', {
                     method: 'POST',
                     body: formData,
                  })
                  .then(response => response.json())  // or, response.text(), etc.
                  .then(data => {
                     resp.innerHTML = JSON.stringify(data); // data is a JSON object
                  })
                  .catch(error => {
                     console.error(error);
                  });
            } else {
               resp.innerHTML = "Please choose some file(s)...";
               resp.style.color = "red";
            }
         }
      </script>
   </body>
</html>

Collectives™ on Stack Overflow

How to pass a List of strings as FormData to FastAPI using JavaScript Fetch API?

1 Answer 1

Working Example

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Working Example

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related