Display file name in file upload option in Bootsrap 4

Question

I am using bootsrap 4 for my page. I have file upload option where users first selects a file. But when user selects a file, the name of the file is not being displayed. In normal html, this happens by default. Please look at my code and screenshot and let me know what has to be done.

<form method="post" action="upload_sub_fasta.php" enctype="multipart/form-data">
            <div class="input-group mb-3">
                    <div class="custom-file">
                            <input type="file" name="file" class="custom-file-input" id="validatedCustomFile" required>
                            <label class="custom-file-label" for="validatedCustomFile">Choose query</label>
                    </div>
                            <button type="submit" name="submit" class="btn btn-primary">Upload</button>
            </div>

    </form>

The following is the screenshot before file selected and after file is selected.

before file is selected

after file is selected

Thanks, Karthic

you want to display a file name ? when user browse the image .....ryt? — PHP Geek, Dec 06 '19 at 05:05

score 0 · Answer 1 · answered Dec 06 '19 at 05:16

Please add these script to your code

'use strict';

;( function ( document, window, index )
{
 var inputs = document.querySelectorAll( '.custom-file-input' );
 Array.prototype.forEach.call( inputs, function( input )
 {
  var label  = input.nextElementSibling,
   labelVal = label.innerHTML;

  input.addEventListener( 'change', function( e )
  {
   var fileName = '';
   if( this.files && this.files.length > 1 )
    fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
   else
    fileName = e.target.value.split( '\\' ).pop();

   if( fileName )
    label.innerHTML = fileName;
   else
    label.innerHTML = labelVal;
  });

  // Firefox bug fix
  input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
  input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
 });
}( document, window, 0 ));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form method="post" action="upload_sub_fasta.php" enctype="multipart/form-data">
            <div class="input-group mb-3">
                    <div class="custom-file">
                            <input type="file" name="file" class="custom-file-input" id="validatedCustomFile" required>
                            <label class="custom-file-label" for="validatedCustomFile">Choose query</label>
                    </div>
                            <button type="submit" name="submit" class="btn btn-primary">Upload</button>
            </div>            

    </form>

Hey thanks a lot...its working. – KarthicdotK Dec 07 '19 at 04:53 — KarthicdotK, Dec 07 '19 at 04:53

score 0 · Answer 2 · answered Dec 06 '19 at 07:19

Below is the working code snippet using bootstrap 4, I think you forgot to add Javascript code. Try this i hope it'll help you out. Thanks

$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

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

score 0 · Answer 3 · answered Dec 06 '19 at 07:35

You can try this code with your css style:

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01"
      aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01"></label>
  </div>
</div>

Display file name in file upload option in Bootsrap 4

3 Answers3