Custom file input does not show file name after upload

Hi,

I am using the .custom-file-input class to customize the <input type='file'>. It works as expected. I see that it is overlapping the default input element.

Issue: Typically the filename is displayed once we upload file. But here the label text is displayed even after uploading the file, i.e., Choose file should change to the uploaded filename.

Solution: I am able to see the file name if I change opacity:0 to opacity:1 from .custom-file-input class. We should be able to fetch the name of the file and replace the label name with the file name.

Below is the code I used:

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

OS: Windows 10 and Android Oreo(8.1) Browser: Chrome Version 69.0.3497.100

[Johann-S]

Hi @arun-awnics

It’s written here: https://getbootstrap.com/docs/4.1/components/forms/#file-browser our custom file input need a bit of JavaScript to work.

Bootstrap recommend this plugin: https://github.com/Johann-S/bs-custom-file-input

[shubhamindrawat]

Hi @imayushshrivastava ,

You can use the below code which will definitely work for you:

$('#customFile').on('change', function(){ files = $(this)[0].files; name = ''; for(var i = 0; i < files.length; i++){ name += '\"' + files[i].name + '\"' + (i != files.length-1 ? ", " : ""); } $(".custom-file-label").html(name); });