Search code examples
file-uploadbootstrap-4symfony4

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: before

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?

Solution

  • 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>