File upload processing in Flask - Mini Project: Build & Apply

File upload processing

📖 Scenario: You are building a simple web app where users can upload a text file. The app will read the file and display its content on the page.

🎯 Goal: Create a Flask app that accepts a file upload from a form, reads the file content, and shows it on the webpage.

📋 What You'll Learn

Create a Flask app with a route to show an upload form

Add a configuration variable to limit the maximum file size

Write code to handle the uploaded file and read its content

Display the uploaded file content on the webpage

💡 Why This Matters

🌍 Real World

File upload is common in web apps for user profile pictures, documents, or data import.

💼 Career

Understanding file upload handling is essential for backend web developers working with user input and file storage.

1

Create the Flask app and upload form

Write code to create a Flask app called app and add a route '/' that returns an HTML form with method='POST' and enctype='multipart/form-data'. The form should have a file input named file and a submit button.

Flask

from flask import Flask, request, render_template_string

# Your code here

Need a hint?

Use Flask(__name__) to create the app. Use @app.route('/', methods=['GET', 'POST']) to define the route. Return a string with the HTML form including method='POST' and enctype='multipart/form-data'.

2

Add max file size configuration

Add a configuration variable MAX_CONTENT_LENGTH to the app.config and set it to 1 * 1024 * 1024 (1 megabyte).

Flask

from flask import Flask, request, render_template_string

app = Flask(__name__)
# Add max file size limit below

@app.route('/', methods=['GET', 'POST'])
def upload():
    return '''
    
      
      
    
    '''

Need a hint?

Set app.config['MAX_CONTENT_LENGTH'] to 1 * 1024 * 1024 to limit uploads to 1MB.

3

Handle file upload and read content

Inside the upload function, check if the request method is 'POST'. Then get the uploaded file from request.files['file']. Read the file content as a string using file.read().decode('utf-8') and store it in a variable called content.

Flask

from flask import Flask, request, render_template_string

app = Flask(__name__)
app.config['MAX_CONTENT_LENGTH'] = 1 * 1024 * 1024

@app.route('/', methods=['GET', 'POST'])
def upload():
    if request.method == 'POST':
        # Your code here
    return '''
    
      
      
    
    '''

Need a hint?

Use request.method == 'POST' to check the form submission. Access the file with request.files['file']. Read and decode the file content with file.read().decode('utf-8').

4

Display uploaded file content on the page

Modify the upload function to return an HTML page that shows the uploaded file content inside a <pre> tag for preserving formatting. Use render_template_string to return the HTML with the variable content safely embedded.

Flask

from flask import Flask, request, render_template_string

app = Flask(__name__)
app.config['MAX_CONTENT_LENGTH'] = 1 * 1024 * 1024

@app.route('/', methods=['GET', 'POST'])
def upload():
    if request.method == 'POST':
        file = request.files['file']
        content = file.read().decode('utf-8')
        # Your code here
    return '''
    
      
      
    
    '''

Need a hint?

Use render_template_string with a template string that includes <pre>{{ content }}</pre> to show the file content safely.