File upload forms in Flask - Step-by-Step Execution

Concept Flow - File upload forms

User opens form page

↓

Browser shows form with file input

↓

User selects file and submits

↓

Server receives POST request

↓

Flask reads file from request.files

↓

Server saves file or processes it

↓

Server sends response back

↓

Browser shows success or error message

This flow shows how a user selects a file in a form, submits it, and how Flask handles the file upload on the server side.

Execution Sample

Flask

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

@app.route('/', methods=['GET', 'POST'])
def upload():
    if request.method == 'POST':
        f = request.files['file']
        f.save(f.filename)
        return 'File saved'
    return '''<form method='post' enctype='multipart/form-data'>
                <input type='file' name='file'>
                <input type='submit'>
              </form>'''

This Flask app shows a form to upload a file and saves the file on the server when submitted.

Execution Table

Step	Action	Request Method	File in request.files	File saved?	Response
1	User opens page	GET	None	No	Form HTML sent
2	User selects file and submits	POST	File object present	No	Processing upload
3	Server reads file	POST	File object present	No	Saving file
4	Server saves file	POST	File object present	Yes	File saved message sent
5	User sees confirmation	POST	None	Yes	File saved

💡 After file is saved, server sends confirmation and stops processing.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
request.method	GET	POST	POST	POST	POST
request.files['file']	None	File object	File object	File object	None
f.filename	None	example.txt	example.txt	example.txt	None
file saved?	No	No	No	Yes	Yes

Key Moments - 3 Insights

Why do we need enctype='multipart/form-data' in the form?

Without enctype='multipart/form-data', the file data won't be sent in the request.files dictionary, so the server cannot access the uploaded file (see execution_table step 2).

What happens if the request method is GET?

The server just sends the form HTML without trying to read or save any file (see execution_table step 1).

How does Flask access the uploaded file?

Flask uses request.files['file'] to get the file object sent by the form input named 'file' (see execution_table step 3).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of request.method at Step 3?

A GET

B POST

C PUT

D DELETE

💡 Hint

Check the 'Request Method' column at Step 3 in the execution_table.

At which step does the file get saved on the server?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look at the 'File saved?' column in the execution_table to find when it changes to Yes.

If the form did not have enctype='multipart/form-data', what would happen at Step 2?

A File would be in request.files

B Request method would change to GET

C File would be missing in request.files

D Server would save file automatically

💡 Hint

Refer to key_moments about enctype and execution_table Step 2.

Concept Snapshot

File upload forms in Flask:
- Use <form method='post' enctype='multipart/form-data'>
- Use <input type='file' name='file'> to select file
- Access file in Flask with request.files['file']
- Save file with file.save(filename)
- Respond with confirmation after saving

Full Transcript

This example shows how a Flask app handles file uploads. The user opens a page with a form that includes a file input. When the user selects a file and submits the form, the browser sends a POST request with the file data encoded as multipart/form-data. Flask reads the file from request.files using the input's name attribute. The server saves the file and sends back a confirmation message. The key is to have the correct form encoding and to access the file properly on the server side.

Practice

1. What must you set in the HTML form tag to allow file uploads in a Flask app?

easy

A. method="get"

B. enctype="multipart/form-data"

C. action="upload"

D. type="file"

Solution

1. Step 1: Understand form encoding for file uploads

   File uploads require the form to send data in a special format that supports files, which is "multipart/form-data".

2. Step 2: Identify the correct form attribute

   The form tag must have the attribute enctype="multipart/form-data" to handle file uploads correctly.

3. Final Answer:

   enctype="multipart/form-data" -> Option B

4. Quick Check:

   Form enctype = multipart/form-data [OK]

Hint: File uploads always need enctype multipart/form-data [OK]

Common Mistakes:

• Using method="get" instead of post
• Forgetting enctype attribute
• Setting type="file" on form tag instead of input
• Confusing action URL with encoding

2. Which Flask code correctly accesses an uploaded file named 'photo' from a form?

easy

A. file = request.form['photo']

B. file = request.args['photo']

C. file = request.data['photo']

D. file = request.files['photo']

Solution

1. Step 1: Identify where uploaded files are stored in Flask

   Uploaded files are stored in request.files, not in request.form or request.args.

2. Step 2: Access the file by its form field name

   Use request.files['photo'] to get the uploaded file object named 'photo'.

3. Final Answer:

   file = request.files['photo'] -> Option D

4. Quick Check:

   Uploaded files = request.files [OK]

Hint: Use request.files to get uploaded files, not request.form [OK]

Common Mistakes:

• Using request.form to get files
• Using request.args which is for URL params
• Trying to access request.data as a dict
• Misspelling 'files' or field name

3. What will the following Flask code print if no file is uploaded?

file = request.files.get('document')
if file and file.filename != '':
    print('File received')
else:
    print('No file uploaded')

medium

A. File received

B. KeyError exception

C. No file uploaded

D. Empty string printed

Solution

1. Step 1: Understand request.files.get behavior when no file sent

   request.files.get('document') returns None if no file was uploaded with that name.

2. Step 2: Evaluate the if condition

   Since file is None, the condition 'file and file.filename != ""' is False, so the else block runs.

3. Final Answer:

   No file uploaded -> Option C

4. Quick Check:

   No file means else prints [OK]

Hint: Check file is not None and filename not empty to confirm upload [OK]

Common Mistakes:

• Assuming request.files['document'] raises error if missing
• Not checking filename for empty string
• Expecting 'File received' even if no file sent
• Confusing request.files.get with request.files[]

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

file = request.files['file']
filename = secure_filename(file)
save_path = os.path.join('uploads', filename)
file.save(save_path)

medium

A. secure_filename should be called on file.filename, not file

B. file.save() requires a file object, not a path

C. os.path.join cannot join strings

D. request.files['file'] returns a string, not a file object

Solution

1. Step 1: Check usage of secure_filename

   secure_filename expects a string filename, but file is a file object, so file.filename should be passed.

2. Step 2: Confirm correct file saving steps

   After getting a safe filename, join path and call file.save(path) correctly.

3. Final Answer:

   secure_filename should be called on file.filename, not file -> Option A

4. Quick Check:

   Pass filename string to secure_filename [OK]

Hint: Use secure_filename(file.filename), not file itself [OK]

Common Mistakes:

• Passing file object to secure_filename
• Confusing file.save argument type
• Misusing os.path.join with non-string
• Assuming request.files returns string

5. You want to allow users to upload multiple images at once and save only PNG files securely. What issue does this Flask code snippet have?

files = request.files.getlist('images')
for file in files:
    if file and file.filename.endswith('.png'):
        filename = secure_filename(file.filename)
        file.save(os.path.join('uploads', filename))

hard

A. file.filename.endswith('.png') is case-sensitive and may miss '.PNG'

B. getlist() returns a single file, so loop will fail

C. secure_filename should be called after saving the file

D. This code correctly filters PNG files and saves them securely

Solution

1. Step 1: Understand getlist() usage

   request.files.getlist('images') correctly returns a list of uploaded files for the field 'images'.

2. Step 2: Check file extension filtering

   Using file.filename.endswith('.png') is case-sensitive and will miss files with uppercase extensions like '.PNG'.

3. Step 3: Confirm secure_filename usage

   secure_filename is correctly called before saving the file.

4. Final Answer:

   file.filename.endswith('.png') is case-sensitive and may miss '.PNG' -> Option A

5. Quick Check:

   Check file extension case-insensitively [OK]

Hint: Check file extensions case-insensitively for uploads [OK]

Common Mistakes:

• Assuming getlist returns one file
• Calling secure_filename after saving
• Ignoring uppercase file extensions
• Not checking if file is None before saving