@Nyholm that's for you :)

@Nyholm Can you have a look here? :)

@Nyholm I totally agree, the "design" is worse - but the UX (try selecting a file...) is much better.
And if you have like 10 file upload fields, then you properly forget which file you have selected, and which you are still needed to add.

Also, the bootstrap documentation also have the "normal unstyled" as an example
https://getbootstrap.com/docs/4.1/components/forms/#form-controls.

And if you want to have the selected file name in your file input, you will need to do something like this

jQuery(document).on('change', '.file-upload', function() {
    $(this).parent().find('label').text($(this).val().replace('C:\\fakepath\\', ''));
});

The best thing would actually be, if it was possible to opt-out (or opt-in) somehow to either set the custom or the normal CSS classes.

And then if you remove the label for the file input, which I think is quite normal if you are using multiple file uploads, then the whole file input is gone (even if you set a placeholder)

I try to leave "design" and UX to bootstrap and just follow their recommendation. But I do recognize that boostrap is not providing the best experience when using multiple file inputs.

The best thing would actually be, if it was possible to opt-out (or opt-in) somehow to either set the custom or the normal CSS classes.

I agree, that would be the best. I would prefer if we could opt-out to not change the current behavior. How would one do this properly? By just adding a css class?

Something like this?
Though, the problem is that it should be part of bootstrap4 layout, and not directly on twig.

twig:
    paths: ['%kernel.project_dir%/templates']
    debug: '%kernel.debug%'
    strict_variables: '%kernel.debug%'
    form_themes: ['bootstrap_4_layout.html.twig']
    custom_file_browser: true

custom_file_browser is true as default

Then in the form theme

{%- set attr = attr|merge({class: (attr.class|default('') ~ (type|default('') == 'file' ? ' (twig.custom_file_browser ? 'custom-control-file' : 'form-control-file') : ' form-control'))|trim}) -%}

(twig.custom_file_browser ? 'custom-control-file' : 'form-control-file')

Another option, could be directly on the FileType but again, this is not part of bootstrap

Or maybe a form theme called "bootstrap_4_layout_nocustom.html.twig,
and then just

twig:
    form_themes: ['bootstrap_4_layout_nocustom.html.twig']

Interesting. But if you configure it in yaml, then there is no why to opt-in/out on case by case basis, right?

Using "bootstrap_4_layout_nocustom.html.twig“ might be simpler.

What if you just added a "bootstrap_4_layout_nocustom_file.html.twig” (not extending anything)?

I agree on the nocustom template will be the best approach for opt-in/opt-out.

Let me give it a try, should I create a new PR or do you want it in this, but with changed back the changes I made?

Let’s keep the changes in this PR since we are trying to solve the same issue.

@Nyholm does this mean you're +1?

No, We are waiting for Martin to give a different implementation to fix this issue.

Any news on this PR? @lsv Can you finish it or shall we close?

Im sorry, I totally forgot about this in my holiday, I will have a commit up in within the next couple of days

With this commit it will look like this

Instead of

How to use it change twig form theme from

twig:
    form_themes: ['bootstrap_4_layout.html.twig']

To

twig:
    form_themes: ['bootstrap_4_nocustom_layout.html.twig']

I have also removed custom check/radio boxes, though its not required as the custom styled works properly.

Also the {% block file_row -%} in bootstrap_4_layout.html.twig is wrong, the label should come before the widget, as with all other form elements. (though as the label is position absolute, it doesnt make any changes

{% block file_row -%}
    <div class="form-group">
    <{{ element|default('div') }} class="custom-file">
    {{- form_widget(form) -}}
    {{- form_label(form) -}}
    </{{ element|default('div') }}>
    </div>
{% endblock %}

I have not changed it, but my nocustom changes the label to before the widget.

@Nyholm

I will close this PR, and make a new, I can see that symfony/master has changed a lot, and if I merge master, there will be a LOT of changed files in the commit.