File upload forms in Flask - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a file is uploaded without setting enctype?

Consider a Flask form that uploads a file but the form tag does not include enctype="multipart/form-data". What will happen when the user tries to upload a file?

Flask

<form method="POST">
  <input type="file" name="file">
  <input type="submit">
</form>

A The file data will not be sent to the server, so <code>request.files</code> will be empty.

B The file will upload correctly and be accessible in <code>request.files</code>.

C The server will raise a <code>TypeError</code> when accessing <code>request.files</code>.

D The browser will automatically add the correct enctype and upload the file.

💡 Hint

Think about how browsers send file data in forms.

Without enctype="multipart/form-data", the browser sends form data as URL encoded text, which cannot include file content. So request.files will be empty.

❓ state_output

intermediate

What is the value of filename after uploading a file?

Given this Flask route, what will be the value of filename if the user uploads a file named photo.png?

Flask

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

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

A "/upload"

B "file"

C "" (empty string)

D "photo.png"

💡 Hint

The filename attribute holds the original file name from the client.

The file.filename property contains the name of the uploaded file as sent by the browser, which is photo.png in this case.

📝 Syntax

advanced

Which option correctly saves an uploaded file securely?

You want to save an uploaded file to a folder named uploads safely. Which code snippet correctly prevents directory traversal attacks?

Flask

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

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

A filename = os.path.basename(file.filename)

B filename = file.filename

C filename = secure_filename(file.filename)

D filename = file.name

💡 Hint

Use a function that sanitizes file names.

secure_filename removes dangerous characters and paths from the filename, preventing directory traversal and other security issues.

🔧 Debug

advanced

Why does this Flask file upload code raise a KeyError?

Examine the code below. When submitting the form with a file, the server raises KeyError: 'file'. Why?

Flask

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

@app.route('/upload', methods=['POST'])
def upload():
    uploaded_file = request.files['file']
    return uploaded_file.filename

A The form's file input name is not 'file', so <code>request.files</code> has no 'file' key.

B The route does not allow POST method.

C The file input is missing the <code>name</code> attribute.

D The server is missing <code>enctype="multipart/form-data"</code> in the form.

💡 Hint

Check the HTML form's input name attribute.

If the file input's name attribute is different from 'file', then request.files['file'] will raise a KeyError.

🧠 Conceptual

expert

What is the main reason to limit allowed file extensions in Flask uploads?

Why should you restrict the types of files users can upload by checking their extensions or content in a Flask app?

A To reduce the size of the uploaded files and save disk space.

B To prevent users from uploading files that could execute harmful code on the server or client.

C To make the upload process faster by only accepting small files.

D To ensure the file names are unique and avoid overwriting.

💡 Hint

Think about security risks from arbitrary files.

Allowing any file type can lead to security risks like uploading scripts or executables that run malicious code. Restricting file types helps protect the server and users.

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