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.