I am trying to display uploaded image files using dropzone and flask. Intentionally, I have used flask-bootstrap to help style my form. Everything works well, except for the appearance of the Choose File button inside the dropzone area. This is how it looks like:
It does not make sense to have the button in there, and I want to get rid of it. While working with Filefield from flask_wtf.file, I am having a hard time removing it.
This is how I render my form:
forms.py
from flask_wtf import FlaskForm
from flask_wtf.file import FileField
from wtforms import SubmitField
class UploadForm(FlaskForm):
file = FileField('Upload File', render_kw={"class": "dropzone"})
submit = SubmitField('Submit')
index.html
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-8">
{{ wtf.quick_form(form) }}
</div>
</div>
It would be so much easier to display the dropzone file upload form disregarding the use of flask-bootstrap to quickly create a simple form as follows:
index.html
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<form action="{{ url_for('index') }}" class="dropzone">
{{ form.hidden_tag() }}
</form>
</div>
</div>
And the result would be this:
I would like to maintain the use of {{ wtf.quick_form(form) }} to create a form and not worry about Choose File button appearing in the middle of the dropzone upload file area. Is there a way to achieve this?

