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.