$(document).ready(function () {
    // GET THE IMAGE WIDTH AND HEIGHT USING fileReader() API.
    function readImageFile(file, width, height, element) {
               var reader = new FileReader();    // Create a new instance.

               reader.onload = function (e) {
                   var img = new Image();
                   img.src = e.target.result;

                   img.onload = function () {
                       var w = this.width;
                       var h = this.height;
                       var rate = (w/h).toString()
                       var point = rate.indexOf(".")

                       if ((width/height).toString().slice(0,point+2) !== rate.slice(0,point+2)) {
                        alert("KIỂM TRA LẠI HÌNH ẢNH!\nKích thước chuẩn của hình ảnh là: " + width + "px x " + height +
                            "px\nKích thước hình ảnh của bạn là: " + w + "px x " + h + "px");
                        // element.value = "";
                    }
                   }
               };
               reader.readAsDataURL(file);
           }
   $( ".gct-validate-image" ).on( "change", function(e) {
       var elementId = e.target.attributes.id.value
       var fi = document.getElementById(elementId);
       if (fi.files.length > 0) {      // FIRST CHECK IF ANY FILE IS SELECTED.

        for (var i = 0; i <= fi.files.length - 1; i++) {
           var fileName, fileExtension, fileSize, fileType, dateModified;

           // FILE NAME AND EXTENSION.
           fileName = fi.files.item(i).name;
           fileExtension = fileName.replace(/^.*\./, '');

           // get image info using fileReader()

           let validateWidth = $("#"+elementId).attr('validate-width')
           let validateHeight = $("#"+elementId).attr('validate-height')

           readImageFile(fi.files.item(i), validateWidth, validateHeight, this);
           }


       }
   });
});
