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

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:

enter image description here

And when I choose an image it should be showing image name instead of Choose file, like this:

enter image description here

So what's going wrong here? How can I show the image name when it's selected before uploading?

formstwitter-bootstraptwitter-bootstrap-3adminltebootstrap-file-input


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions