Why doesn't the filename display in a file input after selecting a file?

Question

I have some html/css using bootstrap to select a file. Shouldn't the name of the file show up after selection? It doesn't in Firefox or Chrome on the Mac.

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

You can see the code fail in action at https://jsfiddle.net/mauricev/kgmhs895/

score 2 · Answer 1 · answered Jan 02 '20 at 15:00

You need to have some script to make it working. Fetch the file name on the input change event and append that to the input field. That will work for you.

$(document).ready(function(){
  $('#inputGroupFile01').on('change',function(){
      //get the file name
      var fileName = $(this).val();
      //replace the "Choose a file" label
      $(this).next('.custom-file-label').html(fileName);
  })
})

body {
   font-family: "Open Sans";
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans" />

<body class="bg-light">
  <div class="container">
    <form class="needs-validation" action="" method="post" >
      <div class="row">
        <div class="col-md-8 mb-3">
          <div class="input-group">
            <div class="custom-file">
              <input type="file" class="custom-file-input" id="inputGroupFile01">
              <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</body>

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

You're not loading and initializing the required custom file input plugin. It's not included in the core Bootstrap package.

The recommended plugin to animate custom file input: bs-custom-file-input, that’s what we are using currently here in our docs.

https://getbootstrap.com/docs/4.4/components/forms/#file-browser

<!DOCTYPE html>
<html lang="en" dir="ltr">

    <head>

        <meta charset="utf-8">

        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans" />

        <style>
            body {
                font-family: "Open Sans";
            }

        </style>

    </head>

    <body class="bg-light">
        <div class="container">
            <form class="needs-validation" action="" method="post">
                <div class="row">
                    <div class="col-md-8 mb-3">
                        <div class="input-group">
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="inputGroupFile01">
                                <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <script>
            $(document).ready(function() {
                bsCustomFileInput.init()
            });

        </script>
    </body>

</html>

Why doesn't the filename display in a file input after selecting a file?

2 Answers2