Image size validation (GUI extension)

Question

I'm trying to add an image size validation using a Tridion extension in the Save component event.

My js code is working but there is a problem, the first time that I add the image the validation doesn't work because the image is not already loaded properly. The first time I try to save the component the console.log shows height: 0 and width:0, despite the image src is the correct... (and height should be 20)

I think that is a usual problem with image loads and js, but the solutions i've tried are not working. Some idea?

The code:

...
var uriImagen = $display.getView().properties.controls.fieldBuilder
                    .getField("preguntas").getField("imagen").getValues();
if (uriImagen != null) {
    var img = new Image();
    var cadenaImagen =  $display.getMultimediaHandlerPath() + "?URI=" + uriImagen;
    img.src = cadenaImagen;         
    img.load = function(){
        console.log("height:"+img.height);
        console.log("widtht:"+img.width);
        //image size validation
        if (img.width != 20 || img.height != 20 )
        {
        alert("wrong image size: must be 20x20px");
        return true
        }
    };
    // handle failure
    img.onerror = function(){
        console.log("image error");
    };

... 

Answer 1

Why doing it with a GUI extension? it would be faster and easier to do it with an Event System - Initiated Phase, you can easily throw an exception indicating that the image size is incorrect.