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
– xNoJustice

2020-07-21 13:27:45 +00:00
Commented Jul 21, 2020 at 13:27 — xNoJustice
– xNoJustice, Commented Jul 21, 2020 at 13:27

Carol Skelly · Accepted Answer · 2020-07-21 13:37:29Z

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, 2020 at 13:37

Carol Skelly

364k92 gold badges741 silver badges651 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

V3nky Over a year ago

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 Demo: codeply.com/p/N2Obik2L1E

Carol Skelly Over a year ago

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: codeply.com/p/URWn89HKjf I will not address the other issue here.

analytical_prat · Accepted Answer · 2020-07-21 13:34:26Z

1

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

answered Jul 21, 2020 at 13:34

analytical_prat

1,01016 silver badges16 bronze badges

Comments

Md. Jakir Hossain · Accepted Answer · 2020-07-25 06:53:20Z

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, 2020 at 6:53

Md. Jakir Hossain

12 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related