checking image size before upload

Question

I noticed when uploading a profile pic to Twitter that its size is checked before upload. Can anyone point me to a solution like this?

Thanks

Answer 1

You need check image Width and Height when Image onload.

var img = new Image;
img.src = URL.createObjectURL(file);
img.onload = function() {
    var picWidth = this.width;
    var picHeight = this.height;

    if (Number(picWidth) > maxwidth || Number(picHeight) > maxheight) {
        alert("Maximum dimension of the image to be 1024px by 768px");
        return false;
    }
}

Answer 2

I think it is impossible unless you use a flash. You can use uploadify or swfupload for such things.

Answer 3

This works perfectly for me

var _URL = window.URL || window.webkitURL;

$("#file").change(function(e) {
var file, img;


if ((file = this.files[0])) {
    img = new Image();
    img.onload = function() {
        if((this.width < 800)||(this.height < 400)){
            alert('Image too small. Images must be bigger than 800 x 400');
            $('#file').val('');
        }

    };
    img.onerror = function() {
        alert( "not a valid file: " + file.type);
    };
    img.src = _URL.createObjectURL(file);

}

});

Kudos to the original creator: http://jsfiddle.net/4N6D9/1/

I modified this to specify the min width and height of an upload.

Answer 4

If you're checking the file size you can use something like uploadify to check the file size before upload.

Checking the actual file dimensions (height / width) may need to be done on the server.

Answer 5

I have tested this code in chrome and it works fine.

var x = document.getElementById('APP_LOGO'); // get the file input element in your form
var f = x.files.item(0); // get only the first file from the list of files
var filesize = f.size;
alert("the size of the image is : "+filesize+" bytes");

var i = new Image();
var reader = new FileReader();
reader.readAsDataURL(f);
i.src=reader.result;
var imageWidth = i.width;
var imageHeight = i.height;
alert("the width of the image is : "+imageWidth);
alert("the height of the image is : "+imageHeight);

Answer 6

Something like this should cope with forms loaded asynchronously, inputs with or without "multiple" set and avoid the race conditions that happen when using FileReader.readAsDataURL and Image.src.

$('#formContainer').on('change', '#inputFileUpload', function(event) {
  var file, _fn, _i, _len, _ref;
  _ref = event.target.files;
  _fn = function(file) {
    var reader = new FileReader();
    reader.onload = (function(f) {
      return function() {
        var i = new Image();
        i.onload = (function(e) {
          var height, width;
          width = e.target.width;
          height = e.target.height;
          return doSomethingWith(width, height);
        });
        return i.src = reader.result;
      };
    })(file);
    return reader.readAsDataURL(file);
  };
  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    file = _ref[_i];
    _fn(file);
  }
});

Note: Needs jQuery, HTML5, hooks to a structure like:

<div id="formContainer">
  <form ...>
  ...
    <input type="file" id="inputFileUpload"></input>
  ...
  </form>
</div>