'How to prevent Flask-WTF forms from closing modal when submitting invalid input?
I am trying to build a website where you can upload a video (this already works). But when submitting a wrong file format, the Flask-WTF form closes the modal. I want it to stay open.
(I am trying it first with an image PNG)
This is the form:
class VideoUploadForm(FlaskForm):
video = FileField('Upload video', validators=[FileAllowed(['png']), FileRequired()])
submit = SubmitField('Upload')
This is the route:
@main.route("/video", methods=['GET', 'POST'])
@login_required
def video():
form = VideoUploadForm()
if form.validate_on_submit():
f = form.video.data
filename = secure_filename(f.filename)
f.save(os.path.join(
os.path.abspath(os.path.join(os.path.dirname(os.path.realpath(__file__)), os.pardir)), 'static\\videos', filename
))
flash('Video has been succesfully uploaded', 'success')
return redirect(url_for('main.video'))
return render_template('video.html', title='Upload video', form=form)
This is the modal:
<div class="modal fade mt-5" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Upload video</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="POST" action="" enctype="multipart/form-data">
{{ form.hidden_tag() }}
<div class="modal-body">
{% if form.video.errors %}
{{ form.video(class="form-control form-control-lg is-invalid") }}
<p class="mt-1 ml-1"><small>Allowed formats: mov, mp4</small></p>
<div class="invalid-feedback">
{% for error in form.video.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% else %}
{{ form.video }}
<p class="mt-1 ml-1"><small>Allowed formats: mov, mp4</small></p>
{% endif %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
{{ form.submit(class="btn btn-primary") }}
</div>
</form>
</div>
</div>
</div>
How to prevent the modal from closing when I try to upload a jpg file for example? For now it will close the modal and if opened again it shows the error message. But i want it to stay open so that you immediately can see the error message.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|