add js and css

.gitignore

@@ -1,5 +1,5 @@
 .DS_Store
-spec/gallery-jquery/fileupload
+spec/gallery-jquery-fileupload
 *.gem
 *.rbc
 .bundle

app/assets/javascripts/s3_direct_upload.js.coffee

@@ -0,0 +1,30 @@
+#= require jquery-fileupload/basic
+#= require jquery-fileupload/vendor/tmpl
+
+jQuery ->
+  $('#fileupload').fileupload
+    add: (e, data) ->
+      file = data.files[0]
+      data.context = $(tmpl("template-upload", file))
+      $('#fileupload').append(data.context)
+      data.submit()
+
+    progress: (e, data) ->
+      if data.context
+        progress = parseInt(data.loaded / data.total * 100, 10)
+        data.context.find('.bar').css('width', progress + '%')
+
+    done: (e, data) ->
+      file = data.files[0]
+      domain = $('#fileupload').attr('action')
+      path = $('#fileupload input[name=key]').val().replace('${filename}', file.name)
+      to = $('#fileupload').data('post')
+      content = {}
+      content[$('#fileupload').data('as')] = domain + path
+      $.post(to, content)
+      data.context.remove() if data.context # remove progress bar
+
+    fail: (e, data) ->
+      alert("#{data.files[0].name} failed to upload.")
+      console.log("Upload failed:")
+      console.log(data)

app/assets/stylesheets/s3_direct_upload_progress_bars.css.scss

@@ -0,0 +1,17 @@
+.upload {
+  border-top: solid 1px #CCC;
+  width: 400px;
+  padding-top: 10px;
+  margin-top: 10px;
+
+  .progress {
+    margin-top: 8px;
+    border: solid 1px #555;
+    border-radius: 3px;
+    -moz-border-radius: 3px;
+    .bar {
+      height: 10px;
+      background: #3EC144;
+    }
+  }
+}