Adding images to the page as they are uploaded

app/assets/javascripts/uploads.js.coffee.erb

@@ -37,7 +37,20 @@ jQuery ->
 
         $.ajax $('#uploader iframe').data('create-resource-url'),
           type: 'POST',
-          data: data
+          data: data,
+          dataType: 'text',
+          success: (upload_id) ->
+            wrapper = $('<div class="wrapper"></div>')
+            img = $('<img class="thumb">')
+            remove_btn = $("<img src='<%= asset_path('delete.png') %>' class='delete' />")
+            remove_btn.click () ->
+              $(this).parent().fadeOut(() -> $(this).remove())
+            img_id = $('<input type="hidden" name="uploads[]" />')
+            img.attr('src', "#{uploaderHost}/#{data.s3_key}/#{data.file_name}")
+            img.attr('data-img-id', upload_id)
+            img_id.val(upload_id)
+            wrapper.append(img).append(img_id).append(remove_btn)
+            $('#uploader').append(wrapper)
 
 
       when 'add upload'

app/assets/stylesheets/uploads.css.scss

@@ -59,4 +59,28 @@ progress{
 .remove_link{
   color: red;
   text-decoration: none;
+}
+
+#uploader { 
+  .wrapper {
+    position: relative;
+    display: inline-block;
+    &:hover {
+      .delete {
+        display: block;
+      }
+    }
+    .thumb { 
+      height: 100px;
+      margin-right: 5px;
+    }
+    .delete { 
+      display:none;
+      position: absolute;
+      top: 2px;
+      right: 7px;
+      background: white;
+      cursor: pointer;
+    }
+  }
 }

app/controllers/uploads_controller.rb

@@ -6,7 +6,7 @@ def index
 
   def create
     @upload = Upload.new(params[:upload] || params.delete_if{ |p| !Upload.attribute_names.include?(p) })
-    render nothing: true if @upload.save
+    @upload.save ? render(json: @upload.id) : render(nothing: true)
   end
 
 end