CODEWITHSUNDEEP
htmltwitter-bootstrapfile-iohtml5-filesystem
Al Amin Khan
Al Amin Khan

Reputation: 83

Bootstrap File Input don't show file name after selecting the file

I am stuck with a small problem, I am using bootstrap in one of my HTML template. Here is the link of that page ( http://demo.graygrids.com/themes/classix/post-ads.html ). You can open the page and go into the "CLASSIFIED PICTURE" Section. The section Looks like this screenshot http://prntscr.com/cvu8nn

The problem is when i click the BROWSE button and select the file i want to upload, I doesn't show the file name after selecting the file. I wanna view the file name in the box after selecting the file. This screenshot will help you to understand http://prntscr.com/cvuabs

Thanks in advance! Please tell me how can i achieve that.

Upvotes: 0

Views: 3393

Answers (1)

Prachi Bhandari
Prachi Bhandari

Reputation: 21

You have to use jQuery to display file name as the file name will bind on browse button click. See the below code and make changes : 

<div tabindex="-1" class="form-control file-caption">
    <div style="width: 239px;" class="file-caption-name" id="divFileName"></div>
</div>



<div class="btn btn-primary btn-file">
    <i class="glyphicon glyphicon-folder-open"></i> &nbsp;Browse … 
    <input id="input-upload-img1" class="file" data-preview-file-type="text" type="file" onchange="setfilename(this.value);>
</div>


<script>
   function setfilename(val)
  {
    var fileName = val().split('\\').pop();
    $('#divFileName').html(fileName);
  }
</script>

Upvotes: 1

Related Questions