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

Concept Flow - File upload processing

User selects file in browser

↓

Browser sends POST request with file

↓

Flask receives request

↓

Check if file part exists

↓

Get file object

↓

Check if filename is valid

↓

Save file

↓

Return success response

This flow shows how a file upload is handled step-by-step from user selection to server saving the file or returning errors.

Execution Sample

Flask

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

@app.route('/upload', methods=['POST'])
def upload():
    if 'file' not in request.files:
        return 'No file part', 400
    file = request.files['file']
    if file.filename == '':
        return 'No selected file', 400
    file.save(f"uploads/{file.filename}")
    return 'File uploaded successfully', 200

This Flask route handles a POST request to upload a file, checks for errors, saves the file, and returns a response.

Execution Table

Step	Action	Condition Checked	Result	Response/Output
1	Receive POST request with files	Is 'file' in request.files?	Yes	Continue processing
2	Get file object	Is filename empty?	No	Proceed to save file
3	Save file to uploads folder	N/A	File saved	Return success message
Exit	End of function	N/A	N/A	HTTP 200: File uploaded successfully

💡 File is saved successfully and function returns HTTP 200 response

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
request.files	{}	{'file': <FileStorage>}	{'file': <FileStorage>}	{'file': <FileStorage>}	{'file': <FileStorage>}
file	None	None	<FileStorage filename='example.txt'>	<FileStorage filename='example.txt'>	<FileStorage filename='example.txt'>
file.filename	N/A	N/A	'example.txt'	'example.txt'	'example.txt'

Key Moments - 3 Insights

Why do we check if 'file' is in request.files before accessing it?

Because if the 'file' key is missing, trying to access request.files['file'] would cause an error. The execution_table row 1 shows this check prevents errors by returning early.

What happens if the filename is empty?

If file.filename is empty, the code returns an error response instead of saving. This is shown in execution_table row 2 where the condition 'Is filename empty?' would be Yes and the function returns a 400 error.

Where is the uploaded file saved?

The file is saved in the 'uploads' folder with the original filename, as shown in execution_table row 3 where file.save is called.

Visual Quiz - 3 Questions

Look at the execution_table, what is the result of the condition checked at Step 1?

A No, 'file' is missing

B Yes, 'file' is in request.files

C Filename is empty

D File saved successfully

💡 Hint

Check the 'Condition Checked' and 'Result' columns in execution_table row 1

At which step does the code save the uploaded file?

A Step 3

B Step 1

C Step 2

D Exit step

💡 Hint

Look at the 'Action' column in execution_table to find where file.save is called

If the filename was empty, what would the response be according to the execution flow?

A HTTP 200 with success message

B HTTP 500 server error

C HTTP 400 with 'No selected file' message

D No response sent

💡 Hint

Refer to key_moments and execution_table row 2 about filename check

Concept Snapshot

File upload in Flask:
- Use request.files to get uploaded files
- Check if 'file' key exists to avoid errors
- Check file.filename to ensure a file was selected
- Save file with file.save(path)
- Return HTTP response indicating success or error

Full Transcript

This visual execution trace shows how Flask processes a file upload. First, the server receives a POST request containing files. It checks if the 'file' part exists in request.files to avoid errors. Then it retrieves the file object and checks if the filename is not empty, ensuring the user selected a file. If checks pass, the file is saved to the uploads folder. Finally, the server returns a success message with HTTP status 200. If any check fails, an error response is returned early. Variables like request.files and file.filename are tracked through each step to show their values. This step-by-step flow helps beginners understand the safe and correct way to handle file uploads in Flask.

Practice

1. What does request.files in Flask represent when handling file uploads?

easy

A. A dictionary-like object containing uploaded files

B. A list of all form fields submitted

C. A string with the file path on the server

D. A function to save files automatically

Solution

1. Step 1: Understand request.files role

   It holds files sent by the client in a dictionary-like object where keys are input names.

2. Step 2: Differentiate from other request parts

   Unlike form fields in request.form, request.files specifically contains uploaded files.

3. Final Answer:

   A dictionary-like object containing uploaded files -> Option A

4. Quick Check:

   Files = dictionary-like object [OK]

Hint: Remember: files come in a dictionary, not a list or string [OK]

Common Mistakes:

• Confusing request.files with request.form
• Expecting a list instead of a dictionary-like object
• Thinking it automatically saves files

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

easy

A. if request.files.filename == ''

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

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

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

Solution

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

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

2. Step 2: Verify filename is not empty

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

3. Final Answer:

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

4. Quick Check:

   Check key and filename not empty [OK]

Hint: Check key exists and filename is not empty string [OK]

Common Mistakes:

• Checking request.form instead of request.files
• Using is None instead of checking filename
• Comparing filename directly to None

3. Given this Flask code snippet:

file = request.files['photo']
filename = secure_filename(file.filename)
file.save(f"uploads/{filename}")
return f"Saved {filename}"

What will be the output if a user uploads a file named my cat.png?

medium

A. Saved mycat.png

B. Saved my cat.png

C. Saved my_cat.png

D. Error due to spaces in filename

Solution

1. Step 1: Understand secure_filename effect

   This function replaces spaces with underscores and removes unsafe characters.

2. Step 2: Apply to 'my cat.png'

   The filename becomes 'my_cat.png' after sanitization.

3. Final Answer:

   Saved my_cat.png -> Option C

4. Quick Check:

   Spaces replaced by underscores in filename [OK]

Hint: Remember secure_filename replaces spaces with underscores [OK]

Common Mistakes:

• Assuming spaces remain in filename
• Expecting filename unchanged
• Thinking spaces cause save error

4. What is wrong with this Flask file upload code?

file = request.files['file']
file.save(file.filename)
return 'File saved!'

medium

A. It does not check if a file was uploaded

B. It saves file to a wrong directory

C. It should use request.form instead of request.files

D. It uses an unsafe filename directly

Solution

1. Step 1: Identify filename safety issue

   Using file.filename directly can allow unsafe paths or characters.

2. Step 2: Recommend using secure_filename

   To avoid security risks, filenames must be sanitized before saving.

3. Final Answer:

   It uses an unsafe filename directly -> Option D

4. Quick Check:

   Always sanitize filenames before saving [OK]

Hint: Always use secure_filename before saving files [OK]

Common Mistakes:

• Not checking if file exists before saving
• Saving files without sanitizing filename
• Confusing request.form with request.files

5. You want to allow users to upload only PNG images and save them safely in Flask. Which code snippet correctly implements this?

hard

A. file = request.files['image']
if file and file.filename.endswith('.png'):
filename = secure_filename(file.filename)
file.save(f"uploads/{filename}")
return 'PNG saved'
else:
return 'Invalid file'

B. file = request.files['image']
if file.filename:
file.save(file.filename)
return 'File saved'
else:
return 'No file'

C. file = request.files.get('image')
if file and file.filename:
filename = secure_filename(file.filename)
file.save(f"uploads/{filename}")
return 'File saved'
else:
return 'No file uploaded'

D. file = request.files['image']
if file and file.filename.endswith('.png'):
file.save(file.filename)
return 'PNG saved'
else:
return 'Invalid file'

Solution

1. Step 1: Check file presence and extension

   file = request.files['image'] if file and file.filename.endswith('.png'): filename = secure_filename(file.filename) file.save(f"uploads/{filename}") return 'PNG saved' else: return 'Invalid file' checks if file exists and filename ends with '.png' to allow only PNG files.

2. Step 2: Use secure_filename before saving

   It sanitizes the filename to prevent security issues before saving.

3. Step 3: Return appropriate messages

   Returns confirmation if saved, else an invalid file message.

4. Final Answer:

   Option A correctly checks extension and uses secure_filename -> Option A

5. Quick Check:

   Check extension + secure filename + save [OK]

Hint: Check extension and sanitize filename before saving [OK]

Common Mistakes:

• Not sanitizing filename before saving
• Not checking file extension properly
• Saving files without checking if uploaded