Symfony FileType自定义

Question

我正在尝试使用twig自定义Symfony中的文件输入的渲染。

plugins.krajee.com/file-basic-usage-demo

我按照文档：https://symfony.com/doc/current/form/form_customization.html

在我的config.yml

中

# Twig Configuration
twig:
    form_themes:
        - 'bootstrap_3_layout.html.twig'

我尝试所有的方法......

1）我的view.html.twig视图中的Custome（这是现有bootstrap布局的复制过去，我只是添加了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 %}

在我的FileType

中

 $builder->add('imageFile', FileType::class, array(
        'required'      => false,
        'label'         =>false,
         'block_name'   => 'file',
        ));

这给了我一个错误

The merge filter only works with arrays or "Traversable", got "NULL" as first argument.

2）创建外部文件

在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 %}

在视图中

{% form_theme form 'form/fields.html.twig' %}

但是所有领域都是定制的......

3）在视图中的渲染中添加类

{{ form_widget(form.imageFile, {'attr': {'class': 'file', 'type': 'file'} }) }}

对于最后两种方法，我得到了这个：

我愿意接受所有解决方案！

感谢您的帮助。

Answer 1

我找到了！

我正在使用kartik-v / bootstrap-fileinput工作。

安装完成后，我在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"

然后在视图中我添加了css和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 %}

表单小部件

{{ form_widget(form.imageFile)}}

和Javascrip

$("#fos_user_profile_form_imageFile").fileinput({
    language: 'fr',
    showUpload: false,
    allowedFileExtensions: ['jpg', 'png', 'gif']
});

结果！

Is Amazing

我希望这会对某人有所帮助:)。

祝你有个美好的一天！