Multiple file uploads in FastAPI - Performance & Optimization

Performance: Multiple file uploads

MEDIUM IMPACT

This affects the page load speed and interaction responsiveness when users upload multiple files simultaneously.

Uploading multiple files in a single request

FastAPI

from fastapi import FastAPI, File, UploadFile
from typing import List
import asyncio

app = FastAPI()

async def process_file(file: UploadFile):
    content = await file.read()
    # simulate async processing
    await asyncio.sleep(0)
    return {'filename': file.filename, 'size': len(content)}

@app.post('/upload')
async def upload_files(files: List[UploadFile] = File(...)):
    tasks = [process_file(file) for file in files]
    results = await asyncio.gather(*tasks)
    return results

Processes files concurrently using asyncio.gather, preventing blocking and improving responsiveness.

📈 Performance GainNon-blocking concurrent file reads reduce INP and improve server throughput.

Uploading multiple files in a single request

FastAPI

from fastapi import FastAPI, File, UploadFile
from typing import List

app = FastAPI()

@app.post('/upload')
async def upload_files(files: List[UploadFile] = File(...)):
    results = []
    for file in files:
        content = await file.read()
        # process file content synchronously
        results.append({'filename': file.filename, 'size': len(content)})
    return results

Reading and processing files sequentially blocks the event loop, causing slower response and poor interaction responsiveness.

📉 Performance CostBlocks event loop during file reads, increasing INP and delaying response.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Sequential file read	N/A (server-side)	N/A	N/A	[X] Bad
Concurrent async file read	N/A (server-side)	N/A	N/A	[OK] Good

Rendering Pipeline

When multiple files are uploaded, the browser sends a multipart request. The server reads each file, which can block event loop if done sequentially. Efficient async handling allows the server to process files concurrently, reducing delay before response.

→Network Request

→Server Processing

→Response Rendering

⚠️ BottleneckServer Processing (file reading and handling)

Core Web Vital Affected

INP

This affects the page load speed and interaction responsiveness when users upload multiple files simultaneously.

Optimization Tips

1Avoid sequential file reads; use asynchronous concurrency.

2Do not block the event loop during file processing.

3Monitor server response times to ensure fast interaction feedback.

Performance Quiz - 3 Questions

What is the main performance issue with reading multiple uploaded files sequentially in FastAPI?

A It blocks the event loop causing slower response times.

B It increases the bundle size sent to the client.

C It causes layout shifts in the browser.

D It reduces the number of files that can be uploaded.

DevTools: Network

How to check: Open DevTools, go to Network tab, upload multiple files, and observe the request timing and response time.

What to look for: Look for long server response times indicating blocking; faster responses indicate better async handling.

Practice

1. In FastAPI, which type hint should you use to accept multiple uploaded files in an endpoint?

easy

A. str with UploadFile

B. List[UploadFile] with File(...)

C. List[str] with File(...)

D. UploadFile without List

Solution

1. Step 1: Understand FastAPI file upload types

   FastAPI uses UploadFile to handle file uploads efficiently.

2. Step 2: Use List for multiple files

   To accept multiple files, you wrap UploadFile in a List and use File(...) to declare it as a file input.

3. Final Answer:

   List[UploadFile] with File(...) -> Option B

4. Quick Check:

   Multiple files = List[UploadFile] [OK]

Hint: Use List[UploadFile] with File(...) for multiple files [OK]

Common Mistakes:

• Using UploadFile without List for multiple files
• Using List[str] which expects strings, not files
• Confusing str type with file uploads

2. Which of the following is the correct syntax to declare a FastAPI endpoint that accepts multiple files named 'files'?

easy

A. files: List[UploadFile] = File(...)

B. files: UploadFile = File(...)

C. files: List[str] = File(...)

D. files: str = UploadFile(...)

Solution

1. Step 1: Check parameter type for multiple files

   Multiple files require List[UploadFile] type hint.

2. Step 2: Use File(...) to mark as file input

   File(...) is needed to tell FastAPI this is a file upload field.

3. Final Answer:

   files: List[UploadFile] = File(...) -> Option A

4. Quick Check:

   Multiple files syntax = List[UploadFile] = File(...) [OK]

Hint: Use List[UploadFile] = File(...) for multiple files param [OK]

Common Mistakes:

• Using UploadFile without List for multiple files
• Using List[str] which is incorrect for files
• Assigning UploadFile(...) instead of File(...)

3. Given this FastAPI endpoint code, what will be the output if two files named 'a.txt' and 'b.txt' are uploaded?

from fastapi import FastAPI, File, UploadFile
from typing import List

app = FastAPI()

@app.post('/upload')
async def upload(files: List[UploadFile] = File(...)):
    return {"filenames": [file.filename for file in files]}

medium

A. {"filenames": ["a.txt", "b.txt"]}

B. {"filenames": ["files", "files"]}

C. {"filenames": []}

D. Runtime error due to wrong type

Solution

1. Step 1: Understand the endpoint logic

   The endpoint returns a dictionary with a list of filenames extracted from the uploaded files.

2. Step 2: Check the uploaded files names

   Two files named 'a.txt' and 'b.txt' are uploaded, so their filenames will be returned in the list.

3. Final Answer:

   {"filenames": ["a.txt", "b.txt"]} -> Option A

4. Quick Check:

   Returned filenames list matches uploaded files [OK]

Hint: Returned filenames list matches uploaded files names [OK]

Common Mistakes:

• Expecting file content instead of filenames
• Confusing parameter name with file names
• Assuming empty list if files uploaded

4. What is wrong with this FastAPI endpoint for multiple file uploads?

from fastapi import FastAPI, File, UploadFile
from typing import List

app = FastAPI()

@app.post('/upload')
async def upload(files: UploadFile = File(...)):
    return {"count": len(files)}

medium

A. File(...) should be replaced with UploadFile(...)

B. Missing async keyword in function definition

C. len(files) is invalid because files is a string

D. files should be List[UploadFile] to accept multiple files

Solution

1. Step 1: Check parameter type for multiple files

   The parameter 'files' is typed as UploadFile, which accepts only one file.

2. Step 2: Correct type for multiple files

   To accept multiple files, it must be List[UploadFile].

3. Final Answer:

   files should be List[UploadFile] to accept multiple files -> Option D

4. Quick Check:

   Multiple files need List[UploadFile] type [OK]

Hint: Use List[UploadFile] for multiple files, not UploadFile alone [OK]

Common Mistakes:

• Using UploadFile instead of List[UploadFile] for multiple files
• Confusing File(...) with UploadFile(...)
• Forgetting async keyword (though present here)

5. You want to create a FastAPI endpoint that accepts multiple files and returns a JSON with each file's name and size in bytes. Which code snippet correctly implements this?

hard

A. async def upload(files: List[str] = File(...)):
return [{"name": f, "size": 0} for f in files]

B. async def upload(files: UploadFile = File(...)):
return [{"name": files.filename, "size": len(await files.read())}]

C. async def upload(files: List[UploadFile] = File(...)):
results = []
for file in files:
content = await file.read()
results.append({"name": file.filename, "size": len(content)})
return results

D. async def upload(files: List[UploadFile] = File(...)):
return [{"name": file.name, "size": file.size} for file in files]

Solution

1. Step 1: Accept multiple files with correct type

   Use List[UploadFile] with File(...) to accept multiple files.

2. Step 2: Read each file content to get size

   Use await file.read() to get bytes, then len() to get size.

3. Step 3: Return list of dicts with name and size

   Build a list of dictionaries with filename and size for each file.

4. Final Answer:

   Code snippet that correctly reads files and returns name and size -> Option C

5. Quick Check:

   Read files async, return name and size list [OK]

Hint: Read files async, use len(content) for size, return list [OK]

Common Mistakes:

• Using UploadFile without List for multiple files
• Trying to get size without reading file content
• Using wrong attribute names like file.name or file.size