form.haml

%form(id="uploadform" action="/images/upload" method="post")
  File:
  %input(type="file" name="file")
  %button.upload(type="button") Upload
  .image_container
  .progress.active
    .bar

progressbar.coffee

class ProgressBar
  constructor: (@$el)->

  track: (upload)->
    @$el.removeClass('bar-success bar-danger')
    upload.progress (ev)=>
      @$el.css("width", "#{ev.percent}%").html(ev.status)
    upload.then =>
      @$el.addClass('bar-success').css("width", "100%").html("yay")
    upload.fail (error)=>
      @$el.addClass('bar-danger').css("width", "0%").html("Ouch: #{error.message}")

upload.coffee

UploadForm = (el) ->
  $el = $(el)
  $fileField = $el.find("input[type=file]")
  $uploadButton = $el.find('button.upload')
  $imageContainer = $el.find('.image_container')

  uploader = new Uploader($el)

  progressBar = new ProgressBar($el.find('.progress .bar'))

  $uploadButton.click ->
    request = uploader.upload($fileField[0], "/images/upload")
    progressBar.track(request)
    request.then (image)->
      $imageContainer.append("""<img src="#{image.metadata.versions[0].url}"/>""")

$ ->
  new UploadForm($("#uploadform"))