Symfony FileType自定義

我試圖自定義Symfony中的文件輸入與樹枝的渲染。Symfony FileType自定義

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（這是現行引導佈局的拷貝過去，我只需要添加類=「文件」）

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

在我的文件類型

$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 /查看/表格/ 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'} }) }}

而對於這2點最後我的方法得到這個：

我向所有解決方案開放！

謝謝你的幫助。

來源

2017-09-09 user3207063

可能你需要創建表單擴展 –

最後一個應該工作肯定。 JavaScript的控制檯中是否有任何錯誤輸出？ – Pete

@Pete不，我的JavaScript控制檯沒有錯誤：/ – user3207063

我發現它！

它的工作原理是使用kartik -v/bootstrap-fileinput。

安裝完畢後，我在config.yml添加一些assetic

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

我希望這將幫助一些一個:)

有一個好的一天！

來源

2017-09-10 14:54:45 user3207063

Symfony FileType自定義

回答

相關問題