CODEWITHSUNDEEP
formsfile-uploadsymfony5
Mark
Mark

Reputation: 79

Filename not shown in Symfony 5.2 in form

I am just learning Symfony and maybe I am doing something wrong. I created a simple form with the possibilty to upload a file. After choosing the file the filename doesn't show up in the form.

Screen 1 - Choose picture

Choosing Picture

Screen 2 - Filename isn't shown No Display

The picturename is correctly saved to the database, so it must be there :)

I used ->add('picture', FileType::class, ['required' => false])

Can someone push me in the right direction. I am trying to figure this out for the last 2 hours.

Upvotes: 2

Views: 2073

Answers (1)

Julien B.
Julien B.

Reputation: 3324

There is a "bug" with that type of field in Symfony when using the Bootstrap form theme.

If you are using Symfony's Boostrap form theme

# config/packages/twig.yaml

twig:
    default_path: '%kernel.project_dir%/templates'
    form_themes:
        - 'bootstrap_4_horizontal_layout.html.twig'

I would recommend adding some Javascript to fix this issue.

$('.custom-file-input').on('change', function(event) {
  let inputFile = event.currentTarget;
  $(inputFile).parent().find('.custom-file-label').html(inputFile.files[0].name);
});

Note that I'm using ES6 syntax here, for better compatibility with old browsers, you might want to use ES5 if you are not using a transpiler. Also, I using the custom-file-label class since I'm using Symfony's Bootstrap 4 form theme, you might want to adjust if you are using another theme.

..files[0].name is used since your FileType could accept multiple files.

Upvotes: 5

Related Questions