How to implement image size (dimension) validation with Jasny Bootstrap

Question

I'm using Jasny's Bootstrap to display preview of image and upload it.

HTML structure is mentioned below.

<div class="fileinput fileinput-new" data-provides="fileinput">

    <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="display: block; width: 100%; min-height: 150px;"></div>

    <div style="width: 100%;"><label>Min. width: 600px, height: 700px </label></div>

</div>

So, using the above code snippet, after browsing the chosen image, it displays the preview of the image immediately without uploading it on server. It creates a img tag within the "fileinput-preview thumbnail" div which looks like something below.

<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="display: block; width: 100%; min-height: 150px; line-height: 150px;">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMDAwMDAwMDAwMEAwMDBQYFAwMFBgcGBgYGBgcJBwcHBwcHCQgJCQoJCQgMDA0NDAwRERERERISEhISEhISEhL/2wBDAQQEBAcGBw4JCQ4RDgsOERQhISEhISEhISEhISEhISEhISEhL/wgARCAEyArwDAREAAhEBAxEB/8QAHAAAAgMBAQEBAAAAAAAAAAAAAgMAAQQFBgcILbx+pb+MtrNid0//Z"></div>

I have a 'Add Another Image' button within the same form that creates another image uploading block (which adds another div block of the above).

Now, i want to integrate image size (i.e dimension in width and height) validation. Minimum width should be 600px and minimum height should be 700px. If user wants to upload an image that does not satisfy the minimum width and height, then no preview will be be displayed. Instead an message can displayed or the label text can be changed into different color.

So, i tried to use the below code

$(function() {
    $('.fileinput-preview').on('DOMNodeInserted', function(event) {
        var imgdata = ($('.fileinput-preview img').attr('src'));
        var h = imgdata.height;
        var w = imgdata.width;
        console.log(w + ' ' + h);
    })

});

I tried to find help from http://www.jasny.net/bootstrap/2.3.1/javascript.html#fileupload and from https://coderwall.com/p/avyx3a/jasny-bootstrap-file-upload-with-existing-file, but didn't get it there. Is there anyway to do this?

Answer 1

The solution to above is:

<script>
var DD=jQuery.noConflict();

function abc(){
    DD( "div.fileinput-preview" ).each(function() {
        var pDiv=this;

        DD(this).on('DOMNodeInserted', function() {
            var img = new Image();
            img.src = (DD('img', this).attr('src'));

            img.onload = function() {
                var w=img.width;
                var h=img.height;

                if(w < 600 || h < 700) {
                    DD(pDiv).parents('.fileinput').fileinput('clear');
                    DD(pDiv).parents('.fileinput').find('.min_msg').css("color", "red");
                } else {
                    DD(pDiv).parents('.fileinput').find('.min_msg').css("color", "black");
                }
            }
        })

    });
}



DD(function() {
    abc();

    DD('.blt-add-new-image').on('click', function(){
        abc();
    })
});
</script>