Javascript - if boolean true not working

Question

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>

is console.log('dimensions = ', dimensions); ever happening? — Nitro.de
– Nitro.de, Commented Apr 28, 2017 at 6:39
How can i trial with this.? can you give some file object that is passed here — Jins Peter
– Jins Peter, Commented Apr 28, 2017 at 6:40
@Nitro.de Yes, it does show 'dimensions = true' when I upload an img with right dimensions — Tidya
– Tidya, Commented Apr 28, 2017 at 6:45
Just a suggestion, but switch would suit better than if ladder. Also yoou should use regex as your image.* is more of a pattern than static value. try string.match(/images\.\w+/) — Rajesh Dixit
– Rajesh Dixit, Commented Apr 28, 2017 at 6:47

D Vorona · Accepted Answer · 2017-04-28 06:45:23Z

3

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.

answered Apr 28, 2017 at 6:45

D Vorona

1361 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tidya Over a year ago

Could you please help me in applying that to my code?

William · Accepted Answer · 2017-04-28 06:48:21Z

0

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!

answered Apr 28, 2017 at 6:48

William

7514 silver badges9 bronze badges

Comments

Waqas Ahmed · Accepted Answer · 2017-04-28 06:56:51Z

0

@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;
}

answered Apr 28, 2017 at 6:56

Waqas Ahmed

1852 silver badges11 bronze badges

4 Comments

Tidya Over a year ago

Can you please apply this on my code? What am i going to callback?

Waqas Ahmed Over a year ago

Sure Would you like to attach appropriate image so that i can run code

Tidya Over a year ago

Thanks.. I uploaded some html and more js so that the code can be run now. Can you please give a look? Thanks

Tidya Over a year ago

Would you please help to add that callback in my code?

Collectives™ on Stack Overflow

Javascript - if boolean true not working

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related