File upload processing in Flask - Performance & Optimization

Performance: File upload processing

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by how the server handles file uploads and how the frontend manages upload UI and feedback.

Handling file uploads in a Flask app

Flask

from flask import Flask, request
import threading
import os
app = Flask(__name__)

def save_file_async(data, filename):
    with open(os.path.join('/tmp', filename), 'wb') as f:
        f.write(data)

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    filename = file.filename
    data = file.read()
    threading.Thread(target=save_file_async, args=(data, filename)).start()
    return 'Upload started'

Offloads file saving to a background thread, freeing the server to respond quickly and handle other requests.

📈 Performance GainNon-blocking upload handling improves INP and server throughput.

Handling file uploads in a Flask app

Flask

from flask import Flask, request
app = Flask(__name__)

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    file.save('/tmp/' + file.filename)
    return 'Upload complete'

Saving files synchronously blocks the server during upload, causing slow response and poor user experience under load.

📉 Performance CostBlocks server request handling during file save, increasing response time and INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Synchronous file save in Flask route	Minimal DOM changes	0 reflows	Low paint cost	[X] Bad
Asynchronous file save with background thread	Minimal DOM changes	0 reflows	Low paint cost	[OK] Good

Rendering Pipeline

File upload processing mainly affects server response time which impacts the browser's ability to paint updated UI and respond to user input.

→Network

→JavaScript Execution

→Paint

⚠️ BottleneckServer-side blocking during file save delays response and UI update.

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness by how the server handles file uploads and how the frontend manages upload UI and feedback.

Optimization Tips

1Avoid blocking server routes with synchronous file save operations.

2Use background threads or asynchronous tasks to handle file saving.

3Monitor server response times in DevTools Network panel to detect upload delays.

Performance Quiz - 3 Questions

What is the main performance problem with saving uploaded files synchronously in a Flask route?

A It causes the browser to repaint multiple times.

B It increases the size of the uploaded file.

C It blocks the server from handling other requests until saving finishes.

D It reduces the file upload speed on the client side.

DevTools: Network

How to check: Open DevTools, go to Network tab, upload a file and observe the request duration and response time.

What to look for: Look for long blocking times or delayed responses indicating server-side processing delays.