<div class="custom-file"> <input type="file" class="custom-file-input" id="validatedCustomFile" required> <label class="custom-file-label" for="validatedCustomFile">Choose file...</lab"> <div class="custom-file"> <input type="file" class="custom-file-input" id="validatedCustomFile" required> <label class="custom-file-label" for="validatedCustomFile">Choose file...</lab">

bootstrap file browser show file name

bootstrap 4 file input doesn’t show the file name 

<form class="was-validated">
  
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <!--<div class="invalid-feedback">Example invalid custom file feedback</div>-->
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
            $('#validatedCustomFile').on('change',function(){
                //get the file name
                var fileName = $(this).val();
                fileName= fileName.replace("C:\\fakepath\\", "");
                //replace the "Choose a file" label
                $(this).next('.custom-file-label').html(fileName);
            })
        </script>


Leave a Reply