Symfony FileType customize - php

Question

I'm trying to customize the rendering of the File Input in Symfony with twig.
plugins.krajee.com/file-basic-usage-demo
I follow the documentation : https://symfony.com/doc/current/form/form_customization.html
In my config.yml
# Twig Configuration
twig:
form_themes:
- 'bootstrap_3_layout.html.twig'
I try all methode...
1) Custome inside the the view in my view.html.twig (this is a copy past of the existing bootstrap layout, I just add class="file")
{% form_theme form _self %}
{% block _user_file_widget -%}
{% if type is not defined or type not in ['file', 'hidden'] %}
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-control')|trim}) -%}
{% endif %}
{%- set type = type|default('text') -%}
<input class="file" type="file" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
{%- endblock _user_file_widget %}
And in my FileType
$builder->add('imageFile', FileType::class, array(
'required' => false,
'label' =>false,
'block_name' => 'file',
));
That gives me an error
The merge filter only works with arrays or "Traversable", got "NULL" as first argument.
2) Create an external file
In Ressources/View/Form/fields.html.twig
{% block form_widget_simple -%}
{% if type is not defined or type not in ['file', 'hidden'] %}
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-control')|trim}) -%}
{% endif %}
{%- set type = type|default('text') -%}
<input class="file" type="file" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
{%- endblock form_widget_simple %}
And in the view
{% form_theme form 'form/fields.html.twig' %}
But all fields are customized...
3) Add class in the rendering in the view
{{ form_widget(form.imageFile, {'attr': {'class': 'file', 'type': 'file'} }) }}
And for this 2 last methods I get this:
I am open to all solution !
Thank you for your help.

Answer 1

I found it !
It's working as I want using kartik-v/bootstrap-fileinput.
After installation, I add some assetic in my config.yml
kartik_js:
inputs:
- "%kernel.root_dir%/../vendor/kartik-v/bootstrap-fileinput/js/fileinput.js"
- "%kernel.root_dir%/../vendor/kartik-v/bootstrap-fileinput/js/locales/fr.js"
- "%kernel.root_dir%/../vendor/kartik-v/bootstrap-fileinput/themes/explorer/theme.js"
kartik_css:
inputs:
- "%kernel.root_dir%/../vendor/kartik-v/bootstrap-fileinput/css/fileinput.min.css"
- "%kernel.root_dir%/../vendor/kartik-v/bootstrap-fileinput/themes/explorer/theme.css"
Then in the view I add the css and js
{% block stylesheets %}
{{ parent() }}
{% stylesheets '#kartik_css' combine=true %}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
{% endblock %}
{% javascripts '#kartik_js' combine=true %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
The form widget
{{ form_widget(form.imageFile)}}
And the Javascrip
$("#fos_user_profile_form_imageFile").fileinput({
language: 'fr',
showUpload: false,
allowedFileExtensions: ['jpg', 'png', 'gif']
});
The Result !
Is Amazing
I hope this will help some one :)
Have a good day !