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

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?

score 0 · Accepted Answer · answered Sep 08 '22 at 08:56

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>

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

1 Answers1