Serving uploaded files in Flask - Step-by-Step Execution

Concept Flow - Serving uploaded files

User uploads file

↓

Server saves file

↓

User requests file URL

↓

Server locates file

↓

Server sends file content

↓

Browser displays or downloads file

This flow shows how a file uploaded by a user is saved on the server and later served back when requested.

Execution Sample

Flask

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

@app.route('/upload', methods=['POST'])
def upload():
    f = request.files['file']
    f.save(f.filename)
    return 'File saved'

@app.route('/files/<filename>')
def serve_file(filename):
    return send_from_directory('.', filename)

This Flask app saves an uploaded file and serves it back when requested by filename.

Execution Table

Step	Action	Input/Condition	Result	Next Step
1	User sends POST to /upload with file 'test.txt'	File present in request.files	File object received	Save file
2	Save file	Call f.save('test.txt')	File saved on server disk	Return confirmation
3	Return response	Return 'File saved'	User sees confirmation message	User requests /files/test.txt
4	User sends GET to /files/test.txt	Filename = 'test.txt'	Server locates file in directory	Send file content
5	Send file content	send_from_directory('.', 'test.txt')	File content sent to user	Browser displays or downloads file
6	End	No more requests	Process complete	Stop

💡 Process stops after file is served and no further requests are made.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 4	Final
f	None	File object for 'test.txt'	File saved to disk	File object not used here	None
filename	None	None	None	'test.txt'	'test.txt'

Key Moments - 3 Insights

Why do we use send_from_directory instead of just returning the file path?

send_from_directory reads the file content and sends it properly over HTTP. Returning a file path would just send text, not the actual file. See execution_table step 5.

What happens if the file does not exist when requested?

Flask will return a 404 error automatically because send_from_directory can't find the file. This is implied in step 4 where the server locates the file.

Why do we save the file with f.save(f.filename)?

This saves the uploaded file on the server disk with its original name so it can be served later. See execution_table step 2.

Visual Quiz - 3 Questions

Look at the execution table, what is the variable 'filename' value at step 4?

A 'test.txt'

B None

C 'upload'

D 'file'

💡 Hint

Check the variable_tracker table column 'After Step 4' for 'filename'

At which step does the server send the actual file content to the user?

A Step 2

B Step 3

C Step 5

D Step 6

💡 Hint

Look at the 'Result' column in execution_table for when file content is sent

If the user uploads a file named 'image.png', what changes in the execution table?

A The server returns an error

B The filename variable changes to 'image.png' at step 4

C The file is saved with the name 'test.txt'

D No changes, filename stays 'test.txt'

💡 Hint

Filename depends on the uploaded file name, see variable_tracker and step 4

Concept Snapshot

Serving uploaded files in Flask:
- Use request.files['file'] to get uploaded file
- Save file with f.save(filename)
- Serve file with send_from_directory(directory, filename)
- This sends file content over HTTP
- Handles file not found with 404 automatically

Full Transcript

This example shows how Flask handles uploaded files. First, the user uploads a file via POST to /upload. The server receives the file object and saves it to disk using f.save(filename). Then, when the user requests the file URL /files/filename, the server uses send_from_directory to locate and send the file content back. This process ensures the file is stored and served correctly. If the file is missing, Flask returns a 404 error. Variables like 'f' and 'filename' track the file object and name through the steps. The execution table details each action from upload to serving the file.