Bootstrap file input does not show the image name which is browsed - forms

Question

I'm using Admin LTE theme and I have added this input for uploading image:
<div class="form-group">
<label for="sendImage">Send Image</label>
<div class="input-group" id="dyanimc-field2">
<div class="custom-file" >
<label class="custom-file-label" for="exampleInputFile">Choose file</label>
<input type="file" class="custom-file-input" id="sendImage" name="product_image[]">
</div>
</div>
</div>
But when I browse and image, it should be showing the image name which is selected but it doesn't!
So by default it looks like this:
And when I choose an image it should be showing image name instead of Choose file, like this:
So what's going wrong here? How can I show the image name when it's selected before uploading?

Answer 1

I can across similar problem while designing a custom user dashboard using Admin LTE HTML template.
After few googling, I realized it was a known issue in bootstrap, this github issue comment solved the problem for me.
I was able to get it working using this third-party library and the lines of code below solved it for me.
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>
<script>
$(document).ready(function () {
bsCustomFileInput.init()
})
</script>