FileUpload Jasny v3.1.3
We have styled the select picker to look similar to the dropdown and the other inputs.
For more information please check Full Github Documentation.
<div class="row">
<div class="col-md-5 col-sm-8">
<h4 class="title"><small>Regular Image</small></h4>
<div class="fileinput fileinput-new text-center" data-provides="fileinput">
<div class="fileinput-new thumbnail img-no-padding">
<img src="../../../assets/img/image_placeholder.jpg" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail img-no-padding"></div>
<div>
<span class="btn btn-outline-default btn-file btn-round"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
<a href="javascript:;" class="btn btn-link btn-danger fileinput-exists btn-round" data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4">
<h4 class="title"><small>Avatar</small></h4>
<div class="fileinput fileinput-new text-center" data-provides="fileinput">
<div class="fileinput-new thumbnail img-circle img-no-padding" style="width: 150px; height: 150px;">
<img src="../../../assets/img/placeholder.jpg" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail img-circle img-no-padding" style="max-width: 150px; max-height: 150px;"></div>
<div>
<span class="btn btn-outline-default btn-file btn-round"><span class="fileinput-new">Add Photo</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
<br>
<a href="javascript:;" class="btn btn-link btn-danger fileinput-exists btn-round" data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>
</div>
</div>
</div>
</div>