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.

Practice

1. What is the main Flask function used to serve uploaded files from a specific folder?

easy

A. send_from_directory

B. render_template

C. redirect

D. url_for

Solution

1. Step 1: Understand serving files in Flask

   Flask provides a function specifically to serve files from a folder safely, which is send_from_directory.

2. Step 2: Identify the correct function

   render_template is for HTML templates, redirect sends users to a different URL, and url_for builds URLs. Only send_from_directory serves files.

3. Final Answer:

   send_from_directory -> Option A

4. Quick Check:

   Serving files = send_from_directory [OK]

Hint: Serving files? Use send_from_directory [OK]

Common Mistakes:

• Confusing send_from_directory with render_template
• Trying to serve files with redirect
• Using url_for to serve files directly

2. Which of the following is the correct syntax to serve a file named example.txt from the folder uploads in Flask?

easy

A. redirect('uploads/example.txt')

B. send_file('uploads/example.txt')

C. send_from_directory('uploads', 'example.txt')

D. url_for('uploads/example.txt')

Solution

1. Step 1: Recall the function signature

   send_from_directory takes two arguments: the folder name and the filename.

2. Step 2: Match the syntax

   send_from_directory('uploads', 'example.txt') correctly calls send_from_directory('uploads', 'example.txt'). Options A, B, and D use incorrect functions or formats.

3. Final Answer:

   send_from_directory('uploads', 'example.txt') -> Option C

4. Quick Check:

   Correct syntax = send_from_directory(folder, filename) [OK]

Hint: Use send_from_directory(folder, filename) syntax [OK]

Common Mistakes:

• Using send_file with folder and filename as one string
• Using redirect to serve files
• Using url_for incorrectly for file serving

3. Given this Flask route to serve uploaded files:

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

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

What happens when a user visits /uploads/photo.png?

medium

A. The server returns a 404 error because the route is incorrect.

B. The server returns the filename as plain text.

C. The server redirects the user to the home page.

D. The file 'photo.png' is sent from the 'uploads' folder to the user.

Solution

1. Step 1: Analyze the route and function

   The route captures the filename from the URL and calls send_from_directory with 'uploads' folder and the filename.

2. Step 2: Understand the behavior on URL visit

   Visiting /uploads/photo.png triggers the function to send the file 'photo.png' from the 'uploads' folder to the user.

3. Final Answer:

   The file 'photo.png' is sent from the 'uploads' folder to the user. -> Option D

4. Quick Check:

   Route sends file from folder = The file 'photo.png' is sent from the 'uploads' folder to the user. [OK]

Hint: Route with filename uses send_from_directory to serve file [OK]

Common Mistakes:

• Assuming route returns text instead of file
• Thinking route redirects instead of serving file
• Believing route is invalid and causes 404

4. Identify the error in this Flask code snippet meant to serve uploaded files:

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

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

medium

A. The folder and filename arguments are reversed in send_from_directory.

B. The route decorator syntax is incorrect.

C. The function name 'files' is a reserved keyword.

D. send_from_directory cannot be used inside a route.

Solution

1. Step 1: Check send_from_directory arguments

   The function call uses send_from_directory(filename, 'uploads'), but the first argument should be the folder, second the filename.

2. Step 2: Confirm correct argument order

   The correct call is send_from_directory('uploads', filename). The route and function name are valid, and send_from_directory is allowed in routes.

3. Final Answer:

   The folder and filename arguments are reversed in send_from_directory. -> Option A

4. Quick Check:

   send_from_directory(folder, filename) order matters [OK]

Hint: Folder first, filename second in send_from_directory [OK]

Common Mistakes:

• Swapping folder and filename arguments
• Thinking function names like 'files' are reserved
• Believing send_from_directory can't be used in routes

5. You want to serve uploaded files securely from the folder user_uploads. Which Flask route setup correctly serves files while preventing directory traversal attacks?

hard

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

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

C. @app.route('/files/<filename>')
def serve_file(filename):
return send_file(f'user_uploads/{filename}')

D. @app.route('/files/<filename>')
def serve_file(filename):
return open(f'user_uploads/{filename}').read()

Solution

1. Step 1: Understand directory traversal risks

   Allowing path:filename lets users include slashes, risking access outside the folder.

2. Step 2: Choose safe route and function

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

   uses <filename> (no slashes) and send_from_directory, which safely serves files and prevents traversal.

3. Step 3: Evaluate other options

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

   allows paths, risking traversal.

   @app.route('/files/<filename>')
   def serve_file(filename):
       return send_file(f'user_uploads/{filename}')

   uses send_file with string path, less safe.

   @app.route('/files/<filename>')
   def serve_file(filename):
       return open(f'user_uploads/{filename}').read()

   reads file content directly, unsafe and breaks response.

4. Final Answer:

   Route with <filename> and send_from_directory for safe serving -> Option B

5. Quick Check:

   Use send_from_directory with filename only to prevent traversal [OK]

Hint: Use <filename> (no path) with send_from_directory for safety [OK]

Common Mistakes:

• Using allowing directory traversal
• Using send_file with raw paths risking security
• Reading file content directly instead of sending file