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)
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.