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.
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.