Why file operations matter in web apps in Flask - See It in Action

Why file operations matter in web apps

📖 Scenario: You are building a simple Flask web app that allows users to upload text files. The app will save these files on the server and then display the contents back to the user. This shows why handling files is important in web apps for storing and retrieving user data.

🎯 Goal: Create a Flask app that accepts a text file upload, saves it on the server, and then reads and displays the file content on a new page.

📋 What You'll Learn

Create a Flask app with a route to upload files

Set up a folder path variable to save uploaded files

Write code to save the uploaded file to the folder

Read the saved file and display its content on a new page

💡 Why This Matters

🌍 Real World

Web apps often let users upload files like images, documents, or data. Handling file operations lets the app save and retrieve these files safely.

💼 Career

Understanding file operations in Flask is key for backend web development roles that involve user data management and server-side storage.

1

Set up Flask app and upload route

Import Flask, request, and render_template from flask. Create a Flask app instance called app. Define a route /upload that accepts GET and POST methods.

Flask

# Your code here

Need a hint?

Start by importing Flask and creating the app instance. Then define the upload route with GET and POST methods.

2

Add upload folder configuration

Create a variable called UPLOAD_FOLDER and set it to the string 'uploads/'. Add this variable to the Flask app config as app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER.

Flask

from flask import Flask, request, render_template

app = Flask(__name__)

# Set upload folder path
UPLOAD_FOLDER = 'uploads/'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

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

Need a hint?

Define the folder path where uploaded files will be saved and add it to the app config.

3

Save uploaded file to the server

Inside the upload function, check if the request method is POST. If yes, get the file from request.files['file']. Use file.save() to save the file to os.path.join(app.config['UPLOAD_FOLDER'], file.filename). Return a string 'File saved!' after saving.

Flask

from flask import Flask, request, render_template
import os

app = Flask(__name__)

UPLOAD_FOLDER = 'uploads/'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

@app.route('/upload', methods=['GET', 'POST'])
def upload():
    # Save uploaded file
    pass

Need a hint?

Check for POST method, get the file from the form, save it to the upload folder, and confirm saving.

4

Read and display saved file content

Create a new route /display/<filename>. In its function, open the file from os.path.join(app.config['UPLOAD_FOLDER'], filename) in read mode. Read the content and return it inside a simple HTML paragraph tag.

Flask

from flask import Flask, request, render_template
import os

app = Flask(__name__)

UPLOAD_FOLDER = 'uploads/'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

@app.route('/upload', methods=['GET', 'POST'])
def upload():
    if request.method == 'POST':
        file = request.files['file']
        file.save(os.path.join(app.config['UPLOAD_FOLDER'], file.filename))
        return 'File saved!'
    return render_template('upload.html')

# Add route to display file content
# Your code here

Need a hint?

Create a route that takes a filename, reads the file content, and returns it wrapped in a paragraph tag.