Symfony 4 Form file upload field does not show selected filename with Bootstrap 4 theme

问题

Using Symfony 4.2.5, I made a Form with a FileType file upload field as described at upload file. I used the Bootstrap 4 theme as described at form_themes and bootstrap4.

config/packages/twig.yaml contains:

twig:
    form_themes: ['bootstrap_4_horizontal_layout.html.twig']

When I load the web page and select a file to upload, the FileType field shows a blank filename:

I found this issue was documented in Symfony issue 27477.

Is there a way to make the Symfony 4 FileType field show the selected filename when using Symfony's Bootstrap 4 theme?

回答1:

To make the Form file input field show the selected filename, Bootstrap 4.3 documentation recommends using the JavaScript library bs-custom-file-input.

Add this JavaScript to your web page:

<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>
<script>
    $(document).ready(function () {
        bsCustomFileInput.init()
    })
</script>

来源：https://stackoverflow.com/questions/55679201/symfony-4-form-file-upload-field-does-not-show-selected-filename-with-bootstrap