Bootstrap: Custom input file after choice file nothing change.

[madmax]

When we choice file nothing change (we don't see filename).
https://getbootstrap.com/docs/4.0/components/forms/#file-browser

This should work this way? We need write JS to look change event and update filename inside custom-file-control?

Tested on:
Beta 4.0.0
Safari 11 and Chrome 60
MacOS 10.13

[Johann-S]

That's true no update, should we add a simple plugin which handle that ?
@mdo, @XhmikosR, @bardiharborow

[tmorehouse]

We have added file name update support in <b-form-file>, which is the Bootstrap-Vue implementation of Bootstrap's custom file input. You might be able to make a plugin out of our file handler code: https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/lib/components/form-file.vue

Basically it places the file names (or file count, in the case of multiple) in a data-* attribute which then picks up the file name(s) via CSS content() selector.

note we have also added focus styling to the file input as well, which is missing in Bootstrap V4.beta CSS (and is needed for keyboard accessibility). It can work with sibling selectors to style the outline, except for Firefox which has a "bug" in the :focus pseudo state of input type file (the :focus pseudo state applies to the button _inside_ the file input element, not the input itself)

[bardiharborow]

I thought we had code for this at some stage (not in a core plugin, but as an optional extra). Where did that go?

[Johann-S]

I don't remember if we had code about that 😯

[jplaverdure]

I'm pretty sure the doc mentions someplace that filename update is not implemented

But it's fairly easy to put in place, here's a solution:

$('.custom-file-input').on('change', function() { 
    let fileName = $(this).val().split('\\').pop(); 
    $(this).next('.custom-file-control').addClass("selected").html(fileName); 
});

[istratos]

@jplaverdure this code won't work for multiple file input.

But I agree this should be a feature, it just feels weird to use this component and not have the file name auto update.

[PascalPixel]

Thanks @jplaverdure

[PrinceOfAbyss]

This but still exists on v4.0.0 beta2

[mdo]

Closing as duplicate of #20813.

[shankyb123]

Thanks @jplaverdure
$('.custom-file-input').on('change', function() {
let fileName = $(this).val().split('\').pop();
$(this).next('.custom-file-control').addClass("selected").html(fileName);
});
This code is working on single file upload

[Qui13t]

@jplaverdure your code isn't working for me:((

[bouiboui]

<div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
</div>

$('.custom-file-input').on('change', function() {
    let fileName = $(this).val().split('\\').pop();
    $(this).siblings('.custom-file-label').addClass('selected').html(fileName);
});

[thewebdevelopers]

@bouiboui - line 3 should target the sibling of the input requiring update, as with multiple inputs on a page your code would update all labels with the same filename.

$('.custom-file-input').on('change', function() {
    let fileName = $(this).val().split('\\').pop();
    $(this).siblings('.custom-file-label').addClass("selected").html(fileName);
});

[bouiboui]

Absolutely, I updated my comment.

[comniemeer]

I added a few lines to the snipped so the default label text gets restored if the file is deselected.

$('.custom-file-input').on('change', function() {
    let fileName = $(this).val().split('\\').pop();
    let label = $(this).siblings('.custom-file-label');

    if (label.data('default-title') === undefined) {
        label.data('default-title', label.html());
    }

    if (fileName === '') {
        label.removeClass("selected").html(label.data('default-title'));
    } else {
        label.addClass("selected").html(fileName);
    }
});

[proakshay]

can we do the same in javascript?

[bouiboui]

You mean, without jQuery? You can, but it will be a lot more verbose.
What's the context, why don't you want to use jQuery?

[Johann-S]

@proakshay and @bouiboui Bootstrap use this plugin to do that: https://www.npmjs.com/package/bs-custom-file-input

[kondagariraviteja1]

If i want for multiple file uploads in single page these code is not working it is working for single file upload and it is applying for last control of file upload how can i upload multiple file uploads...

[Johann-S]

@kondagariraviteja1 you should use https://www.npmjs.com/package/bs-custom-file-input it handle multi file upload, you just have to add multiple attribute on your input file 😉