Visualização da imagem em javascript (coffeescript)

Visualize imagens com proteção e tamanho de tipos de arquivo.

Demo

coffescript:

EXT = /(.|/)(gif|jpe?g|png)$/i
$fileInput = $('#file')

previewImage = ->
    file = $fileInput[0].files[0] if ($fileInput[0].files && $fileInput[0].files[0])
    return unless file?

    $imagePreview = $('#image')
    return $imagePreview.css('background-image', "").text('this file is not supported') unless file.name.match(EXT)
    return $imagePreview.css('background-image', "").text('image size to large (> 1MB)') if file.size > 1048576

    if (window.File && window.FileReader && window.FileList && window.Blob)
        reader = new FileReader()
        reader.onload = (e) => $imagePreview.css('background-image', "url(#{e.target.result})").text('')
        reader.readAsDataURL(file)
      else
        $imageContainer.css('background-image', "none")
        alert 'Unsupported preview image in this browser. Change it!'

$fileInput.change(previewImage)
$('#preview').on 'click', (e) ->
    e.preventDefault()
    $fileInput.trigger('click')

javascript:

var $fileInput, EXT, previewImage;

EXT = /(.|/)(gif|jpe?g|png)$/i;

$fileInput = $('#file');

previewImage = function() {
  var $imagePreview, file, reader;
  if ($fileInput[0].files && $fileInput[0].files[0]) {
    file = $fileInput[0].files[0];
  }
  if (file == null) {
    return;
  }
  $imagePreview = $('#image');
  if (!file.name.match(EXT)) {
    return $imagePreview.css('background-image', "").text('this file is not supported');
  }
  if (file.size > 1048576) {
    return $imagePreview.css('background-image', "").text('image size to large (> 1MB)');
  }
  if (window.File && window.FileReader && window.FileList && window.Blob) {
    reader = new FileReader();
    reader.onload = (function(_this) {
      return function(e) {
        return $imagePreview.css('background-image', "url(" + e.target.result + ")").text('');
      };
    })(this);
    return reader.readAsDataURL(file);
  } else {
    $imageContainer.css('background-image', "none");
    return alert('Unsupported preview image in this browser. Change it!');
  }
};

$fileInput.change(previewImage);

$('#preview').on('click', function(e) {
  e.preventDefault();
  return $fileInput.trigger('click');
});