@electrocnic Maybe this is an upstream bug from Bootstrap.

Can you please test it here too:
https://getbootstrap.com/docs/4.3/components/forms/#file-browser

@jackmu95 Confirmed.
Whatever, is it somehow possible to provide a prop for this element, where we could provide a lambda which gets the raw output string and one can modifiy it however they want?

:)

@electrocnic Can you please create an issue over at Bootstrap and reference this issue so we can close it when it get's fixed.

This sounds like a css/scss issue with bootstrap v4.3

Basically missing the overflow ellipsis rules.

We could also add maybe an optional formatter callback prop... which would be passed the array of file objects

You could try adding the following utility classes to the b-form-input:

<b-form-file class="text-nowrap text-truncate" ... ></b-form-file>

Note that due to the way that the the custom control "browse" is rendered with pseudo elements on the label, the text-truncate ellipsis will be hidden underneath the browse button.

Adding those classes only seems to particular fix the issue:

The text does not wrap to a new line, but it also does not stop behind the Browse button. I had to hardcode the width on the specific filename in order to fix this.

Here is my code (just the classes):
<b-form-file class="text-truncate text-nowrap"></b-form-file>