From 32ad5d9f9cdbc8f175953981ba7df08caf2c07b1 Mon Sep 17 00:00:00 2001
From: Jannik Zschiesche <jz@becklyn.com>
Date: Tue, 10 Jul 2018 21:33:14 +0200
Subject: [PATCH] [Form] Improve rendering of `file` field in bootstrap 4

---
 .../views/Form/bootstrap_4_layout.html.twig   | 21 +++++++++----------
 .../Tests/AbstractBootstrap4LayoutTest.php    | 17 ++++++++++++---
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig b/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig
index 952ef3aec1..e821ac9c5a 100644
--- a/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig
+++ b/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig
@@ -114,6 +114,16 @@
     </div>
 {%- endblock percent_widget %}
 
+{% block file_widget -%}
+    <div class="form-group">
+        <{{ element|default('div') }} class="custom-file">
+            {%- set type = type|default('file') -%}
+            {{- block('form_widget_simple') -}}
+            <label for="{{ form.vars.id }}" class="custom-file-label">Choose File</label>
+        </{{ element|default('div') }}>
+    </div>
+{% endblock %}
+
 {% block form_widget_simple -%}
     {% if type is not defined or type != 'hidden' %}
         {%- set attr = attr|merge({class: (attr.class|default('') ~ (type|default('') == 'file' ? ' custom-file-input' : ' form-control'))|trim}) -%}
@@ -186,8 +196,6 @@
         {%- if compound is defined and compound -%}
             {%- set element = 'legend' -%}
             {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-label')|trim}) -%}
-        {% elseif type is defined and type == 'file' %}
-            {%- set label_attr = label_attr|merge({for: id, class: (label_attr.class|default('') ~ ' custom-file-label')|trim}) -%}
         {%- else -%}
             {%- set label_attr = label_attr|merge({for: id}) -%}
         {%- endif -%}
@@ -269,15 +277,6 @@
     </{{ element|default('div') }}>
 {%- endblock form_row %}
 
-{% block file_row -%}
-    <div class="form-group">
-        <{{ element|default('div') }} class="custom-file">
-            {{- form_widget(form) -}}
-            {{- form_label(form) -}}
-        </{{ element|default('div') }}>
-    </div>
-{% endblock %}
-
 {# Errors #}
 
 {% block form_errors -%}
diff --git a/src/Symfony/Component/Form/Tests/AbstractBootstrap4LayoutTest.php b/src/Symfony/Component/Form/Tests/AbstractBootstrap4LayoutTest.php
index 28b3111c4a..a3fc43a49f 100644
--- a/src/Symfony/Component/Form/Tests/AbstractBootstrap4LayoutTest.php
+++ b/src/Symfony/Component/Form/Tests/AbstractBootstrap4LayoutTest.php
@@ -940,9 +940,20 @@ abstract class AbstractBootstrap4LayoutTest extends AbstractBootstrap3LayoutTest
     {
         $form = $this->factory->createNamed('name', FileType::class);
 
-        $this->assertWidgetMatchesXpath($form->createView(), array('attr' => array('class' => 'my&class form-control-file')),
-'/input
-    [@type="file"]
+        $this->assertWidgetMatchesXpath($form->createView(), array('id' => 'nope', 'attr' => array('class' => 'my&class form-control-file')),
+'/div
+    [@class="form-group"]
+    [
+        ./div
+            [@class="custom-file"]
+            [
+                ./input
+                    [@type="file"]
+                    [@name="name"]
+                /following-sibling::label
+                    [@for="name"]
+            ]
+    ]
 '
         );
     }