File uploads handling in Flask - Mini Project: Build & Apply

File uploads handling

📖 Scenario: You are building a simple web app where users can upload images to share with friends.This app needs a form to select a file and a server route to receive and save the uploaded file.

🎯 Goal: Create a Flask app that accepts image file uploads from users and saves them on the server.

📋 What You'll Learn

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

Add a route to handle POST requests with file uploads

Save the uploaded file to a folder named uploads

Use secure filename handling to avoid unsafe file names

💡 Why This Matters

🌍 Real World

File uploads are common in web apps for profile pictures, documents, or media sharing.

💼 Career

Understanding file upload handling is essential for backend web developers working with user-generated content.

1

Set up Flask app and upload folder

Import Flask and request from flask. Create a Flask app called app. Define a variable UPLOAD_FOLDER and set it to 'uploads'.

Flask

# Your code here

Hint

Start by importing Flask and request, then create the app and set the upload folder path.

2

Create upload form route

Add a route /upload that responds to GET requests. Inside the function upload_form, return a simple HTML form string with method='POST' and enctype='multipart/form-data'. The form should have an input of type file with name='file' and a submit button.

Flask

from flask import Flask, request

app = Flask(__name__)
UPLOAD_FOLDER = 'uploads'

# Add route /upload for GET to show upload form
# Your code here

Hint

Use @app.route with methods=['GET'] and return a form with file input and submit button.

3

Add POST route to handle file upload

Modify the /upload route to accept POST requests. Inside the function upload_file, check if 'file' is in request.files. If yes, get the file object from request.files['file']. Import secure_filename from werkzeug.utils and use it to get a safe filename. Save the file to UPLOAD_FOLDER using file.save(). Return a success message string.

Flask

from flask import Flask, request
from werkzeug.utils import secure_filename

app = Flask(__name__)
UPLOAD_FOLDER = 'uploads'

# Modify /upload route to accept POST and save uploaded file
# Your code here

Hint

Change the route to accept POST. Use request.files to get the file, secure the filename, and save it.

4

Ensure upload folder exists and run app

Import os. Before running the app, check if the folder UPLOAD_FOLDER exists using os.path.exists(). If not, create it with os.makedirs(). Add the if __name__ == '__main__': block and run the app with app.run(debug=True).

Flask

from flask import Flask, request
from werkzeug.utils import secure_filename
import os

app = Flask(__name__)
UPLOAD_FOLDER = 'uploads'

# Ensure upload folder exists and run the app
# Your code here

Hint

Check if the upload folder exists and create it if missing. Then add the main block to run the app.

Practice

1. In Flask, which object do you use to access files uploaded by a user in a form?

easy

A. request.files

B. request.form

C. request.args

D. request.data

Solution

1. Step 1: Understand Flask request objects

   Flask provides different objects to access data sent by the client. request.files holds uploaded files.

2. Step 2: Identify correct object for file uploads

   Files sent via form with enctype='multipart/form-data' are accessed through request.files.

3. Final Answer:

   request.files -> Option A

4. Quick Check:

   File uploads = request.files [OK]

Hint: Uploaded files are in request.files, not request.form [OK]

Common Mistakes:

• Using request.form to get files
• Trying to access files via request.args
• Not using multipart/form-data in form

2. Which of the following is the correct way to check if a file was uploaded before saving it in Flask?

easy

A. if request.args.get('file')

B. if request.files['file'] is None

C. if request.form['file'] != None

D. if 'file' in request.files and request.files['file'].filename != ''

Solution

1. Step 1: Check file presence in request.files

   Use 'file' in request.files to confirm the file key exists.

2. Step 2: Ensure filename is not empty

   Check request.files['file'].filename != '' to confirm a file was selected.

3. Final Answer:

   if 'file' in request.files and request.files['file'].filename != '' -> Option D

4. Quick Check:

   Check key and filename before saving [OK]

Hint: Check both key and filename before saving file [OK]

Common Mistakes:

• Checking request.form instead of request.files
• Not verifying filename is not empty
• Using request.args for file data

3. What will be the output of this Flask route when a file named 'photo.png' is uploaded?

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

@app.route('/upload', methods=['POST'])
def upload():
    f = request.files['file']
    filename = f.filename
    return f"Uploaded: {filename}"

medium

A. Uploaded: None

B. KeyError: 'file'

C. Uploaded: photo.png

D. Uploaded: ''

Solution

1. Step 1: Access file from request.files

   The code gets the file object from request.files['file'], which holds the uploaded file.

2. Step 2: Return the filename string

   The filename attribute contains the original file name, here 'photo.png', which is returned in the response.

3. Final Answer:

   Uploaded: photo.png -> Option C

4. Quick Check:

   Filename returned matches uploaded file [OK]

Hint: Filename attribute holds the uploaded file's name [OK]

Common Mistakes:

• Assuming filename is None if file exists
• Not using request.files to get file
• Forgetting to use POST method

4. Identify the error in this Flask file upload code snippet:

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    if file.filename:
        file.save('/uploads/' + file.filename)
    return 'File saved'

medium

A. Using POST method instead of GET

B. Saving file without checking if 'file' key exists in request.files

C. Missing return statement

D. Incorrect filename attribute usage

Solution

1. Step 1: Check for 'file' key in request.files

   The code accesses request.files['file'] directly without verifying if the key exists, risking a KeyError.

2. Step 2: Properly check key before accessing

   Use if 'file' in request.files before accessing to avoid errors.

3. Final Answer:

   Saving file without checking if 'file' key exists in request.files -> Option B

4. Quick Check:

   Always check key exists before accessing [OK]

Hint: Check 'file' key in request.files before accessing [OK]

Common Mistakes:

• Directly accessing request.files['file'] without check
• Assuming filename always exists
• Ignoring form enctype for file uploads

5. You want to securely save an uploaded file in Flask to a folder named 'uploads'. Which of the following is the best practice to avoid security risks?

hard

A. Use secure_filename() from werkzeug.utils before saving the file

B. Save the file directly with file.filename without changes

C. Rename the file to a fixed name like 'upload.txt' always

D. Save files outside the Flask app folder without any checks

Solution

1. Step 1: Understand filename security risks

   Using raw filenames can allow directory traversal or unsafe characters causing security issues.

2. Step 2: Use secure_filename() to sanitize filenames

   The secure_filename() function cleans the filename to a safe format before saving.

3. Final Answer:

   Use secure_filename() from werkzeug.utils before saving the file -> Option A

4. Quick Check:

   Sanitize filenames with secure_filename() [OK]

Hint: Always sanitize filenames with secure_filename() before saving [OK]

Common Mistakes:

• Saving files with user-provided names directly
• Ignoring filename sanitization
• Using fixed names causing overwrites