Restrict image dimensions using Jquery-File-Upload plugin

Question

I am working with an wordpress theme that uses jQuery-File-Upload and I need to restrict the image file dimensions before uploading it to the server. Is there a way to do it? I'm not very experienced with jquery and I'm getting very frustrated with this. :(

Answer 1

I couldn't find any solutions provided for that, so I decided to use plugins callback to cancel upload using jquery with an optional warning.

var _URL = window.URL || window.webkitURL;
            $('#fileupload').bind('fileuploadadd', function (e, data) {
                var file, img;

                if ((file = data.files[0])) {
                    img = new Image();
                    img.onload = function() {
                        if(this.width !== 480 || this.height !== 70) {
                            $("#fileupload tr").filter(function(i) {  return $(this).find(".name").html() === file.name}).find("td:last-child .cancel").click();
                            alert("The dimensions of " + file.name + " is" + this.width + "x" + this.height +  "! Only 480x70 is allowed!");
                        }
                    };
                    img.onerror = function() {
                        alert( "not a valid file: " + file.type);
                    };
                    img.src = _URL.createObjectURL(file);
                }
            });

Answer 2

Instead of restricting an image file dimension before uploading, why not re-sizing the image? It's a feature that the plugin provide. Take a look to "jquery.fileupload-image.js".

If you want to anyway restrict the size, you can do that once it has been downloaded. The plugin can do that thanks to the UploadHandler (.php) where you can set up those restrictions. Example below:

// Image resolution restrictions:
'max_width' => 800,
'max_height' => 600,
'min_width' => 1,
'min_height' => 1,

Another solution would be to add a callback in the "add" that will trigger a function that will check image wisth/height. Example: How to Preview Image, get file size, image height and width before upload?