jasny fileinput fixed markup
Fixed jasny fileinput markup/style.
HTML
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.0.1-p7/css/bootstrap.min.css">
<script src="http://jasny.github.io/bootstrap/dist/js/jasny-bootstrap.min.js"></script>
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
<a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
</div>
<button class="check"> Check</button>
filename: <div class="filename"> </div>
CSS
/*
fix: bootstrap input btn group with multiple buttons
issue: (http://getbootstrap.com/components/#input-groups-buttons-segmented) you can see an extra left border on the last btn
*/
.input-group-btn > .btn + .btn {
margin-left: -5px;
}
/* made select/change button have round corner */
.fileinput-new .input-group .input-group-btn .btn.btn-file {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
JavaScript
$(".check").on('click', function(){
$(".filename").text($("input[type='file']").val());
});
$(document.body).on("change.bs.fileinput", function(e) {
var file = $(e.delegateTarget, $("form")).find('input[type=file]')[0].files[0];
var fileExtension = file.name.split(".");
fileExtension = fileExtension[fileExtension.length - 1].toLowerCase();
var arrayExtensions = ["jpg", "jpeg", "png"];
if (arrayExtensions.lastIndexOf(fileExtension) == -1) {
alert('Only Images can be uploaded');
}
else {
if (file["size"] >= 2097152 && (fileExtension == "jpg" || fileExtension == "jpeg" || fileExtension == "png")) {
alert('Max 2 MB of file size can be uploaded.');
$("form").find('input[type=file]')[0].closest('.product-image-input').remove();
}
}
});