Serving uploaded files in Flask - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Flask route when serving an uploaded file?

Consider this Flask route that serves a file from the 'uploads' folder. What will the browser receive when accessing '/files/example.txt'?

Flask

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

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

# Assume 'uploads/example.txt' exists with content 'Hello Flask!'

A A 500 Internal Server Error due to missing 'filename' parameter

B A 404 Not Found error because 'send_from_directory' cannot find the file

C The browser downloads or displays the content of 'example.txt' with text 'Hello Flask!'

D The browser receives a JSON response with file metadata

💡 Hint

Remember that send_from_directory serves files from a folder relative to the app root.

send_from_directory serves the requested file if it exists in the specified folder. Since 'example.txt' exists in 'uploads', the file content is sent to the browser.

📝 Syntax

intermediate

Which option correctly serves an uploaded image file in Flask?

You want to serve an image file named 'photo.png' stored in the 'uploads' folder. Which Flask route code is correct?

A

@app.route('/image/<filename>')
def image(filename):
    return send_from_directory('uploads', filename, mimetype='image/png')

B

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

C

@app.route('/image/<filename>')
def image(filename):
    return send_file('uploads/' + filename)

D

@app.route('/image/<filename>')
def image(filename):
    return open('uploads/' + filename).read()

💡 Hint

Use Flask's built-in functions to serve files safely.

send_from_directory safely serves files from a folder. send_file needs a full path and is less safe here. Reading file content directly returns raw bytes without headers.

🔧 Debug

advanced

Why does this Flask route raise a FileNotFoundError when serving uploaded files?

Examine the code below. Why does accessing '/uploads/myfile.txt' cause a FileNotFoundError even though the file exists?

Flask

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

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

# The 'uploads' folder is inside the project directory, not at root '/'

A Because '/uploads' is an absolute path pointing to root, but the folder is relative to the project directory

B Because 'send_from_directory' cannot serve files with 'path' converter in route

C Because the filename parameter is missing in the route

D Because Flask requires files to be served only from 'static' folder

💡 Hint

Check the folder path passed to send_from_directory carefully.

Using '/uploads' as an absolute path points to the root directory, which likely does not contain the uploads folder. The correct path should be relative or absolute to the project folder.

❓ state_output

advanced

What is the response status code when serving a non-existent uploaded file?

Given this Flask route, what status code will the client receive if the requested file does not exist?

Flask

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

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

# 'uploads/missing.txt' does not exist

A 403 Forbidden

B 500 Internal Server Error

C 200 OK with empty content

D 404 Not Found

💡 Hint

Think about what Flask does when a file is missing in send_from_directory.

send_from_directory raises a NotFound exception if the file is missing, which Flask converts to a 404 response.

🧠 Conceptual

expert

Which approach best prevents directory traversal attacks when serving uploaded files in Flask?

You want to serve user-uploaded files safely. Which method best prevents users from accessing files outside the 'uploads' folder?

A Use send_from_directory with a fixed folder path and a filename parameter without any path separators

B Use open() with the filename directly concatenated to the uploads folder path

C Use send_file with a full path constructed by joining uploads folder and filename without validation

D Use os.system to call 'cat' on the filename inside uploads folder

💡 Hint

Consider how Flask's send_from_directory handles path traversal attempts.

send_from_directory safely resolves the filename inside the folder and prevents directory traversal. Directly opening or concatenating paths without checks can allow attackers to access files outside the folder.

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