File upload processing in Flask - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Flask class.

Flask

from flask import [1]

Drag options to blanks, or click blank then click option'

Arender_template

BRequest

CFlask

Dredirect

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Request instead of Flask

Using lowercase 'flask' instead of 'Flask'

The Flask class is imported from the flask module to create the app instance.

2fill in blank

medium

Complete the code to get the uploaded file from the request.

Flask

file = request.files.get('[1]')

Drag options to blanks, or click blank then click option'

Afile

Bfiledata

Cupload

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using keys like 'upload' or 'data' which don't match the form input name

Trying to get the file from request.form instead of request.files

The key 'file' is commonly used in HTML forms for file inputs and is accessed in Flask via request.files['file'] or get('file').

3fill in blank

hard

Fix the error in saving the uploaded file securely.

Flask

filename = secure_filename(file.[1])
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))

Drag options to blanks, or click blank then click option'

Afilename

Bname

Cfilename_raw

Dfile_name

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'name' or 'file_name' which are not valid attributes

Trying to save without securing the filename

The uploaded file object has a 'filename' attribute that contains the original file name. This is passed to secure_filename() to sanitize it before saving.

4fill in blank

hard

Fill both blanks to check if the uploaded file exists and has an allowed extension.

Flask

if file and '.' [1] file.filename and file.filename.rsplit('[2]', 1)[1].lower() in ALLOWED_EXTENSIONS:

Drag options to blanks, or click blank then click option'

A.

Bendswith

Cstartswith

Din

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'endswith' to check for '.' which is incorrect

Using wrong split character other than '.'

The code checks if the filename contains a dot '.' to separate the extension, then splits from the right on '.' to get the extension and checks if it is allowed.

5fill in blank

hard

Fill all three blanks to create a Flask route that accepts POST requests and processes file upload.

Flask

@app.route('/upload', methods=[[1]])
def upload_file():
    if [2] == 'POST':
        file = request.files.get('file')
        if file and allowed_file(file.filename):
            filename = secure_filename(file.[3])
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            return 'File uploaded successfully'
    return 'Upload a file'

Drag options to blanks, or click blank then click option'

A'POST'

B'GET'

Crequest.method

Dfilename

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'GET' instead of 'POST' in methods

Checking request.method against 'GET' instead of 'POST'

Using wrong attribute instead of 'filename' for the file name

The route decorator specifies methods=['POST'] to accept uploads. The function checks if request.method == 'POST' to process the upload. The filename attribute of the file object is used to save the file securely.

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