[Form] Improve rendering of file field in bootstrap 4

Author: Jannik Zschiesche

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

src/Symfony/Component/Form/Tests/AbstractBootstrap4LayoutTest.php

@@ -940,9 +940,20 @@ public function testFile()
     {
         $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"]
+            ]
+    ]
 '
         );
     }