Flask-WTForm FileField returns None instead of the file uploaded

Question

I am trying to upload a picture using Flask-WTForm's FileField. But even though I upload a picture, it can't detect it.

The form is created as:

class User_settings_profile_picture_form(FlaskForm):
    picture = FileField('Update profile picture', validators=[DataRequired(), FileAllowed(['jpg', 'png', 'jpeg', 'gif'])])
    submit = SubmitField('Update')

The route where the form is used is like:

profile_pic_form = User_settings_profile_picture_form()
.
.
.
if profile_pic_form.validate_on_submit():
    if profile_pic_form.picture.data:
        ...
else:
    #for debugging purposes
    print("Is valid: " + profile_pic_form.validate())
    print("Errors: " + profile_pic_form.errors)
    print("Request files: " + request.files)

The print statements are for debugging purposes and in the console it is like:

Is valid: False
Errors: {'picture': ['This field is required.']}
Request files: ImmutableMultiDict([])

The html looks like:

<form method="POST" action="">
    {{ profile_pic_form.hidden_tag() }}
    <div class="mb-3">
        <h3>Profile Picture</h3>
        {{ profile_pic_form.picture(class="form-control-file", placeholder="Enter new Bio") }}
        {{ profile_pic_form.submit(class="mt-3 btn btn-primary mb-5") }}
    </div>
</form>

If I print the profile_pic_form.picture.data, it gives me None.

Does anyone know why this is happening. I looked through SO, but did not find a solution for this specific case.

Answer 1

The problem was in the html. It should be:

<form method="POST" action="" enctype="multipart/form-data">

Instead of just:

<form method="POST" action="">

Edit: Read the documentation to understand better.