python - Wtforms Flask Filefield custom design

Question

I am working to change the text of the upload button from 'Choose File' to 'Select File'

Successfully, completed by

Html -

<input class="btn" type="button" value="Select File" onclick="document.getElementById('aa').click();" />
{{ form.aa(class="form-control form-control-lg", style="display:none" ) }}
 <br><span id="fileprint"></span>

<script type="text/javascript">
    document.getElementById('aa').onchange = function () {
    f = this.value.replace(/.*[/\]/, '');
    $('#fileprint').text(f);
    };
</script>

forms.py

class ad(FlaskForm):
    afile = FileField('Upload ALS', validators=[DataRequired(), 
        FileAllowed(['xlsx', 'xls'], "wrong format!")])
    submit = SubmitField('Submit')

It works good, like this image -

When, I upload different types of file, it goes to the old design, like this,

How to solve this?, thanks

question from:https://stackoverflow.com/questions/65916943/wtforms-flask-filefield-custom-design

Answer 1

Waitting for answers