The file name in the file browser is Bootstrap 4

Question

The file browser in Boostrap 4 is missing a file name. Just say, select the file ... I made a javascript solution for it. Is there a better way to solve it?

HTML

<label class="file"> <input type="file" id="file1" > <span class="file-custom" data-content="Choose file..."></span> </label> 

JQuery

 $("input[type=file]").change(function(){ var fieldVal = $(this).val(); if (fieldVal != undefined || fieldVal != "") { $(this).next(".file-custom").attr('data-content', fieldVal); } }); 

CSS

 .file-custom:after { content: attr(data-content); } 

The only difference is that you need to add content content to the range. On the other hand, it facilitates language change.

Link to the Bootstraps file browser: http://v4-alpha.getbootstrap.com/components/forms/#file-browser

Answer 1

It seems that Bootstrap now tends to not add a JS solution for this, and instead will most likely include something like your script in the documentation as a suggested implementation based on mdo comments here, where there is also much more complete solution: https://github.com/twbs/bootstrap/issues/20813

I updated your simple code for Bootstrap 4 Alpha 6.

JQuery

 $("input[type=file]").change(function () { var fieldVal = $(this).val(); if (fieldVal != undefined || fieldVal != "") { $(this).next(".custom-file-control").attr('data-content', fieldVal); } }); 

CSS

 .custom-file-control:after { content: attr(data-content) !important; } 

---

Edit:

In the above example, something like C:\\fakepath... will be shown, we can also get only the file name that will be shown using event.target.files[0].name :

 $("input[type=file]").change(function (event) { var fieldVal = event.target.files[0].name; if (fieldVal != undefined || fieldVal != "") { $(this).next(".custom-file-control").attr('data-content', fieldVal); } }); 

Answer 2

In response to Joey's answer for the public release of Bootstrap 4, you will now use this JS and CSS:

 $("input[type=file]").change(function () { var fieldVal = $(this).val(); if (fieldVal != undefined || fieldVal != "") { $(this).next(".custom-file-label").text(fieldVal); } });