CODEWITHSUNDEEP
file-uploadbootstrap-4symfony4
Brent Pfister
Brent Pfister

Reputation: 505

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?

Upvotes: 3

Views: 3075

Answers (2)

daHormez
daHormez

Reputation: 31

If you are using Symfony and EasyAdmin within the FileUploadType, you have to add the file upload javascript from easyadmin manually.

TextField::new('upload')
   ->setFormType(FileUploadType::class)
   ->addJsFiles(Asset::fromEasyAdminAssetPackage('field-file-upload.js'))

Upvotes: 1

Brent Pfister
Brent Pfister

Reputation: 505

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>

Upvotes: 9

Related Questions