2

Straight to point. I want to set the limit of the width and height of the image when user upload an image using plupload.

Letsay: if width: 1000px height: 1000px else you must upload image with at least width:1000px and height:1000px

// $(".form").validator();
$(function() {
    if($("#uploader").length > 0) {
        var uploader = new plupload.Uploader({
            runtimes : 'html5,flash,silverlight',
            browse_button : 'pickfile',
            container : 'uploader',
            max_file_size : '10mb',
            url : 'design.php?do=upload&ajax=1',
            multiple_queues: false,
            file_data_name: 'design',
            flash_swf_url : www + '/js/plupload.flash.swf',
            silverlight_xap_url : www + '/js/plupload.silverlight.xap',
            filters : [
                {title : "Image files", extensions : "jpg,gif,png,jpeg,bmp"}
            ]

        });

        $('#uploadfiles').click(function(e) {
            if($("#uploader select[name=category]").val() == "") {
                $("#uploader select[name=category]").next('.error-required').show();
                return false;
            }

            uploader.start();
            e.preventDefault();
        });

        uploader.init();

So, is this possible?

j0k
  • 22,600
  • 28
  • 79
  • 90
faidzal
  • 35
  • 2
  • 7

4 Answers4

3

You can easily write a filter for plupload.

Here is filter for min required width. Add bellow code to your script. (Just copy)

plupload.addFileFilter('min_width', function(maxwidth, file, cb) {
    var self = this, img = new o.Image();

    function finalize(result) {
        // cleanup
        img.destroy();
        img = null;

       // if rule has been violated in one way or another, trigger an error
        if (!result) {
            self.trigger('Error', {
                code : plupload.IMAGE_DIMENSIONS_ERROR,
                message : "Image width should be more than " + maxwidth  + " pixels.",
                file : file
            });
     }
        cb(result);
    }
    img.onload = function() {
        // check if resolution cap is not exceeded
        finalize(img.width >= maxwidth);
    };
    img.onerror = function() {
        finalize(false);
    };
    img.load(file.getSource());
});

And add this filter to your upload script.

filters : {
            min_width: 700,
        },
Ruchit Patel
  • 1,030
  • 1
  • 12
  • 24
1

Plupload doesn't support this itself (although it has been requested). There are probably a couple of reasons for this, firstly because you just can't get the image dimensions before upload in IE (you can in some other browsers) and secondly, whilst that would work for some browsers using the using the HTML4/5 methods, I am not sure that the Flash/Silverlight etc. methods would also be able to reliably determine dimensions.

If you were happy with limited browser, HTML4/5 methods only you should hook into the "FilesAdded" event e.g.

uploader.bind('FilesAdded', function(up, files) {
  //Get src of each file, create image, remove from file list if too big
});
Community
  • 1
  • 1
Thom Seddon
  • 1,485
  • 2
  • 15
  • 25
0

I recently wanted to do the same thing, and was able to achieve it the way Thom was suggesting. He was correct on it's limitation though; if you want to add this, it will only work in modern browsers and not in the flash or silverlight runtimes. This is not a huge issue, as my non-html5 users will just get an error after upload, rather than before.

I initialized a total image count variable to keep track of the images placed on the page. Also a vairable to store photos we want to delete after we read them all.

var total_image_count = 0;
var files_to_remove = [];

Then I read the pending files with FileReader(), place them on the page, and get their width

init:{
        FilesAdded: function(up, files) {
           if (uploader.runtime == "html5"){
              files = jQuery("#"+uploader.id+"_html5")[0].files
              console.log(files);
              for (i in files){

                 //create image tag for the file we are uploading
                 jQuery("<img />").attr("id","image-"+total_image_count).appendTo("#upload-container");

                 reader_arr[total_image_count] = new FileReader();

                 //create listener to place the data in the newly created 
                 //image tag when FileReader fully loads image.
                 reader_arr[total_image_count].onload = function(total_image_count) {
                    return function(e){
                       var img = $("#image-"+total_image_count);
                       img.attr('src', e.target.result);
                       if ($(img)[0].naturalWidth < 1000){

                          files_to_remove.push(files[i]); //remove them after we finish reading in all the files
                          //This is where you would append an error to the DOM if you wanted.
                          console.log("Error. File must be at least 1000px");
                       }
                    }
                 }(total_image_count);

                 reader_arr[total_image_count].readAsDataURL(files[i]);

                 total_image_count++;
              }
              for (i in files_to_remove){
                 uploader.removeFile(files_to_remove[i]);
              }
           }
        }
     }

As a side note, I was wanting to show image thumbnails anyway, so this method works great for me. I have not figured out how to get an image's width without first appending it to the DOM.

Sources:

Thumbnail an image before upload: https://stackoverflow.com/a/4459419/686440

Accessing image's natural width: https://stackoverflow.com/a/1093414/686440

Community
  • 1
  • 1
pastudan
  • 111
  • 6
0

to access width and heigth without thumbnail an image you can do this:

uploader.bind('FilesAdded', function(up, files) {
    files = jQuery("#"+uploader.id+"_html5").get(0).files;
    jQuery.each(files, function(i, file) {
        var reader = new FileReader();
        reader.onload = (function(e) { 
            var image = new Image();
            image.src = e.target.result;

                image.onload = function() {
                    // access image size here using this.width and this.height
                }
            };

        });

        reader.readAsDataURL(file);
    }
}
yooooo
  • 16