Bootstrap 4 Custom file upload is not displaying the file name in label

Question

I am trying to create file upload using the Bootstrap 4 custom-file . In this process file name is not getting displayed in the Label after the file is uploaded. I have tried using Javascript to update the file name in label. However this did not work. Below is the code. Please help me how to fix this.

<div class="container-fluid">
    <form enctype="multipart/form-data">
        <div class="card">
                    <div class="card-header">
                        BERICHT DATEI IMPORTIEREN
                    </div>
                    <div class="card-body">       
                            <div class="form-group">
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" id="blkUploadReport" name="blkUploadReport">
                                        <label class="custom-file-label" for="blkUploadReport">Choose the File</label>
                                    </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-6">
                                    <button class="btn btn-success btn-raised btn-sm" id="saveEdit" >
                                    IMPORTIEREN <span class="glyphicon glyphicon-floppy-disk"></span> 
                                    </button>                   
                                </div>  
                            </div>
                    </div>
        </div>
    </form>
</div>

$('.custom-file-input').on('change', function(){
    console.log("I am inside upload event");
    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);
});

try `.text(name)` instead of `.html(name) ` – xNoJustice Jul 21 '20 at 13:27 — xNoJustice, Jul 21 '20 at 13:27

score 1 · Answer 1 · answered Jul 21 '20 at 13:34

If there are multiple files, I recommend creating an array using push in javascript and then displaying them.

var name = []
for (var i = 0; i < files.length; i++) {
   name.push(files[i].name) // Anything else you want to be displayed
}
document.getElementbyClassName('custom-file-label').innerHTML = name

score 1 · Accepted Answer · answered Jul 21 '20 at 13:37

1

The jQuery selector isn't selecting the input element. Use the id attribute of the file input instead.

$('#blkUploadReport').on('change', function(){
    console.log("I am inside upload event");
    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);
})

Demo: https://codeply.com/p/bJmnTUiqhS

Also see: Bootstrap 4 File Input

answered Jul 21 '20 at 13:37

Carol Skelly

351,302
90
710
624

Thanks for the answer. However it worked in Codeply for List of files. But when I tried for single file . It did not work . Also I have another issue with modal appearance after validating the form.Issue link mentioned below. Created the demo in Codeply. Issue : [link](https://stackoverflow.com/questions/63050718/jquery-form-validation-only-one-modal-shows-up-and-other-modals-disappearing) Demo: https://www.codeply.com/p/N2Obik2L1E – V3nky Jul 23 '20 at 10:37
Your codeply isn't right for selecting the file name. The `files` is always going to be an array. It would be like this for a single file: https://codeply.com/p/URWn89HKjf I will not address the other issue here. – Carol Skelly Jul 23 '20 at 11:00

score 0 · Answer 3 · answered Jul 25 '20 at 06:53

0

$(".custom-file-input").on("change", function() {

var fileName = $(this).val().split("\").pop();

$(this).siblings(".custom-file-label").addClass("selected").html(fileName);

});

answered Jul 25 '20 at 06:53

Md. Jakir Hossain

1
2

Bootstrap 4 Custom file upload is not displaying the file name in label

3 Answers3