File uploads handling in Flask - Step-by-Step Execution

Concept Flow - File uploads handling

User selects file in browser

↓

Browser sends POST request with file

↓

Flask receives request

↓

Check if file part exists

Yes↓

Validate file (e.g., extension)

Yes↓

Save file to server folder

↓

Send response to user

↓

END

This flow shows how a file selected by the user is sent to the Flask server, validated, saved, and then a response is sent back.

Execution Sample

Flask

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

@app.route('/upload', methods=['POST'])
def upload_file():
    file = request.files.get('file')
    if file:
        file.save(f"uploads/{file.filename}")
        return 'File saved'
    return 'No file uploaded'

This Flask route handles a POST request to upload a file, saves it if present, and returns a confirmation.

Execution Table

Step	Action	Request Data	Check	Result	Response
1	Receive POST request	file=example.txt	file part exists?	Yes	Continue
2	Validate file	filename=example.txt	Filename allowed?	Yes	Continue
3	Save file	Save to uploads/example.txt	File saved?	Yes	Return 'File saved'
4	End	No further action	-	-	Response sent to user
5	Receive POST request	no file part	file part exists?	No	Return 'No file uploaded'

💡 Execution stops after sending response to user.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
file	None	<FileStorage 'example.txt'>	<FileStorage 'example.txt'>	Saved to disk	Saved
request.files	{}	{'file': <FileStorage>}	{'file': <FileStorage>}	{'file': <FileStorage>}	{'file': <FileStorage>}

Key Moments - 2 Insights

Why do we check if 'file' exists in request.files before saving?

Because if the user submits the form without selecting a file, 'file' will be None. Checking prevents errors when calling save(). See execution_table step 1 and 5.

What happens if the filename is empty or not allowed?

The code should validate the filename before saving. If invalid, it should not save and return an error. In the sample, we assume validation passes (step 2).

Visual Quiz - 3 Questions

Look at the execution table, what is the response when no file is uploaded?

A 'No file uploaded'

B Empty response

C 'File saved'

D 'Error saving file'

💡 Hint

Check execution_table row 5 for the response when file part does not exist.

At which step is the file actually saved to the server?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at execution_table row 3 where the action is 'Save file'.

If the file part exists but filename is empty, what should happen?

A Return 'File saved'

B Skip saving and return an error or message

C Save the file anyway

D Crash the server

💡 Hint

Refer to key_moments about validating filename before saving.

Concept Snapshot

Flask file upload handling:
- Use request.files.get('file') to get uploaded file
- Check if file exists before saving
- Validate filename and file type
- Save file with file.save('path')
- Return response to user
- Protect server by validating inputs

Full Transcript

This example shows how Flask handles file uploads. When a user selects a file and submits the form, the browser sends a POST request with the file data. Flask receives this request and checks if the file part exists in request.files. If it does, the file is validated and saved to a server folder. Finally, Flask sends a response confirming the file was saved. If no file is uploaded, Flask returns a message indicating that. This process prevents errors by checking for the file before saving and encourages validating filenames to keep the server safe.

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