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.