Serving uploaded files in Flask - Mini Project: Build & Apply

Serving Uploaded Files with Flask

📖 Scenario: You are building a simple Flask web app where users can upload files. After uploading, users should be able to access and download their files from the server.

🎯 Goal: Build a Flask app that serves uploaded files from a specific folder so users can download them by visiting a URL.

📋 What You'll Learn

Create a Flask app with an upload folder path

Set a configuration variable for the upload folder

Write a route to serve files from the upload folder

Use Flask's send_from_directory function to serve files

💡 Why This Matters

🌍 Real World

Web apps often let users upload files like images or documents. Serving these files back to users requires safely sending files from a server folder.

💼 Career

Knowing how to serve uploaded files is essential for backend web developers working with Flask or similar frameworks.

1

Set up the upload folder path

Create a variable called UPLOAD_FOLDER and set it to the string 'uploads'.

Flask

# Your code here

Hint

This variable will tell Flask where to find the uploaded files.

2

Configure the Flask app to use the upload folder

Add a line to set app.config['UPLOAD_FOLDER'] equal to the variable UPLOAD_FOLDER.

Flask

UPLOAD_FOLDER = 'uploads'
# Your code here

Hint

This tells Flask where to look for uploaded files when serving them.

3

Create a route to serve uploaded files

Write a Flask route with the URL pattern /uploads/<filename> that uses a function named uploaded_file with a parameter filename.

Flask

from flask import Flask

app = Flask(__name__)
UPLOAD_FOLDER = 'uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

# Your code here

Hint

This route will handle requests to get files by their filename.

4

Serve the file using send_from_directory

Inside the uploaded_file function, return the result of calling send_from_directory with app.config['UPLOAD_FOLDER'] and filename as arguments.

Flask

from flask import Flask, send_from_directory

app = Flask(__name__)
UPLOAD_FOLDER = 'uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

@app.route('/uploads/')
def uploaded_file(filename):
    # Your code here

Hint

This function sends the requested file from the upload folder to the user.

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