Getting rid of the Filefield button when working with dropzone and flask-bootstrap forms

Viewed 166

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:

enter image description here

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:

enter image description here

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?

0 Answers
Related