Serving uploaded files in Flask

Introduction

Serving uploaded files lets users access files they have sent to your app. It makes the files available through a web link.

You want users to download images or documents they uploaded.

You need to show uploaded profile pictures on user pages.

You want to allow users to share files via URLs.

You want to serve files stored on your server safely.

You want to handle file downloads in your web app.

Syntax

Flask

from flask import send_from_directory

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

send_from_directory safely sends files from a folder.

The folder name is relative to your app's root folder.

Examples

This example serves files from a folder named user_uploads. It supports subfolders because of path:filename.

Flask

from flask import send_from_directory

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

This serves image files stored inside static/images folder.

Flask

from flask import send_from_directory

@app.route('/images/<filename>')
def serve_image(filename):
    return send_from_directory('static/images', filename)

Sample Program

This Flask app lets users upload a file via a form. After uploading, it saves the file in the uploads folder. Then it redirects the user to a URL where the uploaded file is served back using send_from_directory.

This way, users can upload and then view or download their files easily.

Flask

from flask import Flask, request, redirect, url_for, send_from_directory
import os

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

os.makedirs(UPLOAD_FOLDER, exist_ok=True)

@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        file = request.files.get('file')
        if file:
            filepath = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
            file.save(filepath)
            return redirect(url_for('uploaded_file', filename=file.filename))
    return '''
    <h1>Upload a file</h1>
    <form method="post" enctype="multipart/form-data">
      <input type="file" name="file">
      <input type="submit" value="Upload">
    </form>
    '''

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

if __name__ == '__main__':
    app.run(debug=True)

Important Notes

Always validate and sanitize filenames to avoid security risks.

Use send_from_directory instead of send_file for safer file serving.

Make sure the upload folder exists and has correct permissions.

Summary

Use send_from_directory to serve uploaded files safely.

Set up a route that takes a filename and returns the file from your upload folder.

After uploading, redirect users to the file URL to access their files.

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