CODEWITHSUNDEEP
javascriptif-statementboolean
Tidya
Tidya

Reputation: 39

Javascript - if boolean true not working

So, i created the following function to check the file uploaded by user is 1) Image only 2) Size less than maxSize KBs 3) Dimensions less than maxWidth and maxHeight

All else is working fine except that the condition where I check dimensions. The value in dimensions is indeed the correct value but the condition if(dimensions) doesn't run even when dimensions=true.

Is there something I am doing wrong? 

var maxThumbnailWidth = '1050';
var maxThumbnailHeight = '700';
var maxThumbnailSize = '60';


function imageFileChecks(file, type) // type here refers to either Image or Banner or Thumbnail
{
  var maxSize;
  var maxWidth;
  var maxHeight;
  var dimensions = false;
  if (type == 'image') {
    maxSize = maxImageSize;
    maxWidth = maxImageWidth;
    maxHeight = maxImageHeight;
  }
  if (type == 'banner') {
    maxSize = maxBannerSize;
    maxWidth = maxBannerWidth;
    maxHeight = maxBannerHeight;
  }
  if (type == 'thumbnail') {
    maxSize = maxThumbnailSize;
    maxWidth = maxThumbnailWidth;
    maxHeight = maxThumbnailHeight;
  }

  //First check file type.. Allow only images

  if (file.type.match('image.*')) {
    var size = (file.size / 1024).toFixed(0);
    size = parseInt(size);
    console.log('size is ' + size + ' and max size is ' + maxSize);
    if (size <= maxSize) {

      var img = new Image();
      img.onload = function() {
        var sizes = {
          width: this.width,
          height: this.height
        };
        URL.revokeObjectURL(this.src);

        //console.log('onload sizes', sizes);
        console.log('onload width sizes', sizes.width);
        console.log('onload height sizes', sizes.height);
        var width = parseInt(sizes.width);
        var height = parseInt(sizes.height);
        if (width <= maxWidth && height <= maxHeight) {
          dimensions = true;
          console.log('dimensions = ', dimensions);
        }

      }

      var objectURL = URL.createObjectURL(file);
      img.src = objectURL;

      if (dimensions) {
        alert('here in dimensions true');
        sign_request(file, function(response) {
          upload(file, response.signed_request, response.url, function() {
            imageURL = response.url;
            alert('all went well and image uploaded!');
            return imageURL;
          })
        })
      } else {
        return errorMsg = 'Image dimensions not correct!';
      }


    } else {
      return errorMsg = 'Image size not correct!';
    }

  } else {
    return errorMsg = 'Image Type not correct!';
  }
}
<div class="form-group">
  <label class="col-md-6 col-xs-12 control-label">Thumbnail</label>
  <div class="col-md-6 col-xs-12">
    <input type="file" id="thumbnail" class="file" required>
    <br>
  </div>
</div>

<script type="text/javascript">
  document.getElementById('thumbnail').onchange = function() {
    var file = document.getElementById('thumbnail').files[0];
    if (!file) {
      console.log("ji");
      return;
    }
    var type = 'thumbnail';
    var thumbnailURL = imageFileChecks(file, type);
    

  }
</script>

Upvotes: 1

Views: 2071

Answers (3)

Waqas Ahmed
Waqas Ahmed

Reputation: 185

@William is right.You can handle it like that 

function loadImage(src,callback){
var img = new Image();
    img.onload = function() {
      if (callback) {
         callback(img);
       }
   }
 img.src = src;
}

Upvotes: 0

William
William

Reputation: 751

You set your dimension property inside the img.onload callback function. This will not be executed directly. Then you check the value directly below, which will not be set yet. This is the nature of JavaScript: async functions being queued up to run at some time (example when an image finished loading). To solve your problem, you need to make the rest of your function execute after img load. This can be done with either callback functions or promises. I would read up on the asynchronous behavior a bit. Sorry for not providing a link, but should be plenty out there!

Upvotes: 0

D Vorona
D Vorona

Reputation: 136

This seems like an async issue -- your if(dimensions) statement is running before your img.onload function finishes, in which case dimensions would be equal to false when you get to that part in your code, despite the img.onload function and its logic executing correctly.

You could try nesting the if(dimensions) condition in the img.onload function.

Upvotes: 3

Related Questions