title: JQuery-File-Upload Client side Image resizing with coffeescript
body: <p>I'd like to implement client side image resizing using <a href="https://github.com/blueimp/jQuery-File-Upload" rel="nofollow noreferrer">Jquery-File-Upload</a>:</p>
  
  <p><a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing" rel="nofollow noreferrer">https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing</a></p>
  
  <p>I'd like to implement it in coffeescript, though, to use with some file uploading code I found from this railscast:</p>
  
  <p><a href="http://railscasts.com/episodes/383-uploading-to-amazon-s3" rel="nofollow noreferrer">http://railscasts.com/episodes/383-uploading-to-amazon-s3</a></p>
  
  <p>I'm not sure how to incorporate the disableImageResize example with coffeescript.  This is what I have, which doesn't work (I can run the app, but it doesn't seem to do any resizing):</p>
  
  <pre><code>jQuery -&gt;
    $('#new_image').fileupload
      dataType: "script"     
      disableImageResize: /Android(?!.*Chrome)|Opera/
                  .test(window.navigator &amp;&amp; navigator.userAgent),
              imageMaxWidth: 667,
              imageMaxHeight: 667
      add: (e, data) -&gt;
        types = /(\.|\/)(gif|jpe?g|png)$/i
        file = data.files[0]
        if types.test(file.type) || types.test(file.name)
          $('#images').append('&lt;div class="placeholder"&gt;&lt;/div&gt;');
          $('.placeholder').hide();
          data.context = $(tmpl("template-upload", file))
          $('#imageUploadProgress').append(data.context)
          data.submit()       
        else
          alert("#{file.name} is not a gif, jpeg, or png image file")
      progress: (e, data) -&gt;
        if data.context
          progress = parseInt(data.loaded / data.total * 100, 10)
          data.context.find('.bar').css('width', progress + '%')
          if progress == 100
             $('.placeholder').show();
             # scroll to the bottom of the thumbGallery to show recently uploaded image
             document.getElementById("images").scrollTop = document.getElementById("images").scrollHeight
  </code></pre>
  
  <p>Can someone tell me what I'm doing incorrectly?  I found other StackOverflow questions about the same topic, but both are unanswered:</p>
  
  <p><a href="https://stackoverflow.com/questions/19096946/how-to-resize-images-client-side-using-jquery-file-upload">How to resize images client side using jquery file upload</a></p>
  
  <p><a href="https://stackoverflow.com/questions/19925700/resizing-image-at-client-side-using-jquery-file-upload-to-amazon-s3">Resizing image at client-side using JQuery file upload to amazon S3</a></p>