djbender · May 15, 2014 20:45 · May 15, 2014 · May 15, 2014 · May 15, 2014 · May 15, 2014
diff --git a/screen.css b/screen.css
@@ -0,0 +1,11 @@
+.progress {
+  max-width: 600px;
+  margin:    0.2em 0 0.2em 0;
+}
+
+.progress .bar {
+  height:  1.2em;
+  padding: 0.2em;
+  color:   white;
+  display: none;
+}
diff --git a/user_controller.rb b/user_controller.rb
@@ -1,5 +1,8 @@
   # GET /users/new
   def new
-    @s3_direct_post = S3_BUCKET.presigned_post(key: "uploads/#{SecureRandom.uuid}/${filename}", success_action_status: 201, acl: :public_read)
+    @s3_direct_post = S3_BUCKET.presigned_post(
+      key:                   "uploads/#{SecureRandom.uuid}/${filename}", 
+      acl:                   :public_read,
+      success_action_status: 201)
     @user = User.new
   end
diff --git a/users-show.html.erb b/users-show.html.erb
@@ -1,3 +1,5 @@
+<!-- ... -->
+
 <%= form_for(@user, html: { class: "directUpload" }) do |f| %>
   <% if @user.errors.any? %>
     <div id="error_explanation">

diff --git a/foo.js.erb → users-show.html.erb b/foo.js.erb → users-show.html.erb
diff --git a/foo.js.erb b/foo.js.erb
@@ -1,3 +1,26 @@
+<%= form_for(@user, html: { class: "directUpload" }) do |f| %>
+  <% if @user.errors.any? %>
+    <div id="error_explanation">
+      <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>
+
+      <ul>
+      <% @user.errors.full_messages.each do |msg| %>
+        <li><%= msg %></li>
+      <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <div class="field">
+    <%= f.label :avatar_url %><br>
+    <%= f.file_field :avatar_url %>
+  </div>
+  <div class="actions">
+    <%= f.submit %>
+  </div>
+<% end %>
+
+<script>
   $(function() {
     $('.directUpload').find("input:file").each(function(i, elem) {
       var fileInput    = $(elem);
@@ -50,4 +73,5 @@
         }
       });
     });
-  });
+  });
+</script>
diff --git a/config-initializers-aws.rb b/config-initializers-aws.rb
@@ -0,0 +1,4 @@
+AWS.config(access_key_id:     ENV['AWS_ACCESS_KEY_ID'],
+           secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'] )
+
+S3_BUCKET = AWS::S3.new.buckets[ENV['S3_BUCKET']]
diff --git a/user_controller.rb b/user_controller.rb
@@ -0,0 +1,5 @@
+  # GET /users/new
+  def new
+    @s3_direct_post = S3_BUCKET.presigned_post(key: "uploads/#{SecureRandom.uuid}/${filename}", success_action_status: 201, acl: :public_read)
+    @user = User.new
+  end
diff --git a/gistfile1.js → foo.js.erb b/gistfile1.js → foo.js.erb
diff --git a/gistfile1.js b/gistfile1.js
@@ -0,0 +1,53 @@
+  $(function() {
+    $('.directUpload').find("input:file").each(function(i, elem) {
+      var fileInput    = $(elem);
+      var form         = $(fileInput.parents('form:first'));
+      var submitButton = form.find('input[type="submit"]');
+      var progressBar  = $("<div class='bar'></div>");
+      var barContainer = $("<div class='progress'></div>").append(progressBar);
+      fileInput.after(barContainer);
+      fileInput.fileupload({
+        fileInput:       fileInput,
+        url:             '<%= @s3_direct_post.url %>',
+        type:            'POST',
+        autoUpload:       true,
+        formData:         <%= @s3_direct_post.fields.to_json.html_safe %>,
+        paramName:        'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
+        dataType:         'XML',  // S3 returns XML if success_action_status is set to 201
+        replaceFileInput: false,
+        progressall: function (e, data) {
+          var progress = parseInt(data.loaded / data.total * 100, 10);
+          progressBar.css('width', progress + '%')
+        },
+        start: function (e) {
+          console.log('Started');
+          submitButton.prop('disabled', true);
+
+          progressBar.
+            css('background', 'green').
+            css('display', 'block').
+            css('width', '0%').
+            text("Loading...");
+        },
+        done: function(e, data) {
+          console.log('Done');
+          submitButton.prop('disabled', false);
+          progressBar.text("Uploading done");
+
+          // extract key and generate URL from response
+          var key   = $(data.jqXHR.responseXML).find("Key").text();
+          var url   = '//<%= @s3_direct_post.url.host %>/' + key;
+
+          // create hidden field
+          var input = $("<input />", { type:'hidden', name: fileInput.attr('name'), value: url })
+          form.append(input);
+        },
+        fail: function(e, data) {
+          console.log("Failed");
+          progressBar.
+            css("background", "red").
+            text("Failed");
+        }
+      });
+    });
+  });
No results found