无法清除文件输入

Question

I'm using the Jasny Plugin and I'm trying to clear the file uploaded through the input:

<div class="form-group">
    <div class="fileinput fileinput-new text-center" data-provides="fileinput">
        <div class="fileinput-new thumbnail" data-hasqtip="1" title="" aria-describedby="qtip-1">
            <img class="image-preview" src="../assets/img/image_placeholder.jpg" alt="...">
        </div>
        <div class="fileinput-preview fileinput-exists thumbnail" style=""></div>
        <div>
            <span class="btn btn-round btn-rose btn-file">
            <span class="fileinput-new">Add Photo</span>
            <span class="fileinput-exists">Change</span>
                <input type="hidden"><input type="file" name="..." id="product-image" accept="image/*">
            </span>
            <br>
            <a href="#" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput">
                <i class="fa fa-times"></i> 
                Remove </a>
        </div>
    </div>
</div>

After uploaded the image, the preview appear in the box of the plugin, so I execute this code pressing a button:

$('#product-image').fileinput("clear");

but I get this error:

Cannot read property 'val' of undefined
    at c.clear (jasny-bootstrap.min.js:6)
    at HTMLInputElement.<anonymous> (jasny-bootstrap.min.js:6)
    at Function.each (jquery.min.js:2)
    at r.fn.init.each (jquery.min.js:2)
    at r.fn.init.a.fn.fileinput (jasny-bootstrap.min.js:6)
    at HTMLButtonElement.dispatch (jquery.min.js:3)
    at HTMLButtonElement.q.handle (jquery.min.js:3)

Answer 1

Try using instead :

$(".fileinput").fileinput("clear");

As you shouldn't be selecting the input inside the plugin to clear it, but rather the whole fileinput classes.