How to get dimensions of the image in Fine Uploader before submitted to server and validate it?

Question

I am using 5.11.10 version of Fine Uploader.

I know there is a validation feature in Fine Uploader which allows to set max/min width/height of the images to be uploaded. But this is not enough for me. Because I want to set a predefined list of exact pairs of width and height values, so that if an image's dimensions match one of those predefined width and height pairs, then the image will pass the validation.

I checked out onValidate and onSubmit callbacks. None of them give any information about the dimensions. onSubmit receives the id of the image that can be used to get the file by using getFile method. But getFile does not give dimensions, too.

So, any suggestions?

Answer 1

Answering my own question after searching for a while.

I borrowed the logic from source code of Fine Uploader where the dimensions of the image are determined. The key point is to return a promise in the onSubmit handler.

Note: my_custom_validation is a custom method outside of the scope of this answer. You should have your own implementation for your needs.

onSubmit: function(id, name){
    var promise = new qq.Promise();
    var file = this.getFile(id);
    var image = new Image();

    var url = window.URL && window.URL.createObjectURL ? window.URL :
      window.webkitURL && window.webkitURL.createObjectURL ? window.webkitURL :
      null;

    image.onload = function(){
        if(my_custom_validation(this.width, this.height)){
            promise.success();    
        } else {
            promise.failure();
        }

    };

    image.src = url.createObjectURL(file);

    return promise;
}