-2

I have this script which work (not in the if part) to check a picture dimension. the picture have to under 300x300 and this script always return false (even for 100x100 picture)

function validate_dimention(fileName) {
    input = document.getElementById("profilepic");
    file = input.files[0];
    var reader = new FileReader();
    var image = new Image();
    var width;
    var height;
    reader.readAsDataURL(file);
    reader.onload = function(pic) {
        image.src = pic.target.result;
        image.onload = function() {
            width = this.width; //panjang
            height = this.height; //lebar
        }
    }
    if (width <= 300 && height <= 300) {
        return true;
    } else {
        console.log(width);
        console.log(height);
        return false;
    }
}

the console log always return both as undefined (so the code have no syntax eror),, is there a way so width equals to //panjang and height equals to //lebar??

Pointy
  • 405,095
  • 59
  • 585
  • 614
Vins
  • 1
  • 1
  • Or another duplicate http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call – Alexei Levenkov Dec 13 '15 at 18:30
  • It's not possible to `return` a result based on information only obtained by an asynchronous event. The event won't actually occur to set the information until after the `return` has already provided a value. – Jonathan Lonowski Dec 13 '15 at 18:31
  • @JonathanLonowski sorry but dont really get your idea.. the full code was in https://codeshare.io/jscript,, can't I check it before submit it? – Vins Dec 13 '15 at 18:41

1 Answers1

3

This is because onload is an event, and is asynchronous. It will be called after the image loaded. Just move the condition inside the onload function to solve this. But, because of that asynchronous call, you'll not be able to return any value directly. You'll have to use a callback, where you'll do the code depending on the result:

function validate_dimention(fileName, callback) {
    input = document.getElementById("profilepic");
    file = input.files[0];
    var reader = new FileReader();
    var image = new Image();
    var width;
    var height;
    reader.readAsDataURL(file);
    reader.onload = function(pic) {
        image.src = pic.target.result;
        image.onload = function() {
            width = this.width; //panjang
            height = this.height; //lebar
            if (width <= 300 && height <= 300) {
                callback(true);
            } else {
                callback(false);
            }
        }
    }
}

// And you call it that way :
validate_dimention(fileName, function (result) {
    // Do whatever you want, using result as the result of your function. It 'll be either true or false.
});
Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
Serge K.
  • 5,303
  • 1
  • 20
  • 27
  • Well that'll get the `console.log()` calls working, but overall the function still won't do what the OP wants. – Pointy Dec 13 '15 at 18:29
  • I just saw that, editing my answer – Serge K. Dec 13 '15 at 18:30
  • @NathanP. I've move it and still not working... :( – Vins Dec 13 '15 at 18:39
  • @Vins check my update answer, and also [this link](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) pointed by users in the comments – Serge K. Dec 13 '15 at 18:41
  • @NathanP. hm.. looks like I still dont really get it,, i've change my code to like this https://codeshare.io/likeThis ,, and still failed to return true on 100x100 picture – Vins Dec 13 '15 at 18:49
  • @NathanP. the console.log(calback) ?? – Vins Dec 13 '15 at 18:57
  • @Vins To answer your question, make a function to handle the `onchange` event and call the `validate_dimention` the way I showed you. Also, document yourself about callbacks and asynchronous calls. – Serge K. Dec 13 '15 at 19:03