Bootstrap v5 File Input not showing chosen file name

[MontyHu]

Hi, I'm using Bootstrap v5, alpha 2, for a new project and I have a question about the new form file input. Not sure if this is the right place to post this.

Here's the code I'm using to create a file chooser for my form:

<div class="form-file">
  <input type="file" class="form-file-input" id="image_homepage" name="image_homepage">
  <label class="form-file-label" for="image_homepage">
    <span class="form-file-text">Choose file...</span>
    <span class="form-file-button">Browse</span>
  </label>
</div>

When I click on "Choose file..." then select a file, the form-file-text still shows "Choose file..." instead of being replaced with the name of the file chosen. I notice this works the same way on the Bootstrap 5 documentation site.

Is this a bug, or is this how it's supposed to work? I'm hoping it will be changed to show the file name selected just like the standard HTML file input works.

[babakfp]

It's how it's supposed to work.

[MontyHu]

Not sure about that. The online documentation says:

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

The "and selected file name text" means to me that the selected file name should appear in the element. if that's not what it means, what does it mean?

This form element should work like the native HTML file input and show the file name once selected, otherwise, it looks like you haven't chosen a file if is still says "Chose a file..." when you have.

[techboyg5]

You have to add custom JavaScript!

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

[MontyHu]

Oh!! Totally didn't register that part of the documentation. Damn, I thought this was already baked in to the framework.

Do you know where I could find code that would show the file name selected?

[skmedix]

[MontyHu]

Where does that go? I tried it as a class on the input field and on the wrapping div with the class "form-file", but it didn't change anything.

[XhmikosR]

It's a known issue, v5 doesn't work with bs-custom-file-input. We will integrate the plugin in v5.