Description
Symfony version(s) affected: 4.1
Description
When rendering a <input type="file"> with bootstrap_4_layout.html.twig enabled, it gives the input a class custom-file-input and the label a class custom-file-label. The CSS for this, do that its not able to see which file are selected, as in a normal <input type="file">
No selected file
And with a file selected
Now if you in the FormType set the label to false on the element, also I have added a placeholder with ['attr' => ['placeholder' => 'Choose file']
(Yes totally blank, but still able to select a file by clicking in the empty area, but still blank after selected a file)
How to reproduce
composer create-project symfony/skeleton
composer require twig annotations form
Create a form type with type Symfony\Component\Form\Extension\Core\Type\FileType
Add the bootstrap 4 css to twig https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
Add form_themes: ['bootstrap_4_layout.html.twig'] to config/packages/twig
Create a controller with your form type
Or just clone https://github.com/lsv/twig_bootstrap4_filetype
Possible Solution
The custom-file-label and custom-file-input classes should be removed, or reworked.
With the following code
<?php
namespace App\Form;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\FileType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
class TestType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options): void
{
$builder
->add('file', FileType::class, [
'label' => 'PDF file',
])
->add('label_false', FileType::class, [
'label' => false,
])
->add('label_null', FileType::class, [
'label' => null,
])
->add('file_label_false_placeholder', FileType::class, [
'label' => false,
'attr' => ['placeholder' => 'Choose file'],
])
->add('file_label_null_placeholder', FileType::class, [
'label' => null,
'attr' => ['placeholder' => 'Choose file'],
])
;
}
public function configureOptions(OptionsResolver $resolver): void
{
$resolver->setDefaults([
'mapped' => false,
]);
}
}
This will be the result
