s3ff 0.9.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: aa68843504870dde78c2146cbd742ec26a9c5826
+  data.tar.gz: a90a1ceb009cc4488aef06886bdac71806667a62
+SHA512:
+  metadata.gz: dca77539e239ef3ca2c666861f75a9adac27945d461615f6bb7132bffe77aa8faf5a0ceb7c60e565edb127b9a41fced54580e97d65dc13231194a6ee6741070b
+  data.tar.gz: 60e7ed6509d3a9ef284c754df7380cf7b4b3f6955435790bff7c78b5fbd1cb2558dfc551d3823cef0507208cc163005aaf55af3d7e2dbc32cdfb1330563f8e1e

data/README.md

@@ -0,0 +1,107 @@
+# S3FF
+
+Using `s3_file_field` with `paperclip`
+
+## Install
+
+### 1. Add javascript
+
+in your application.js
+
+```
+//= require s3ff
+```
+
+### 2. Change `file_field` input to use `s3_file_field`
+
+```
+= form_for :user do |f|
+  = f.s3_file_field :avatar
+```
+
+or if you're using `simple_form`
+
+```
+= simple_form_for :user do |f|
+  = f.input :avatar do
+    = f.s3_file_field :avatar, :class => "form-control"
+```
+
+### 3. Add footer
+
+```
+= include_s3ff_templates
+```
+
+NOTE: Feel free to modify & render the templates manually, but keep the `s3ff_` prefixed CSS classes for our javascript to work properly.
+
+## What will happen
+
+To illustate, if you have a file field like this
+
+```
+<input type="file" name="user[avatar]">
+```
+
+When `s3ff` kicks in, it would upgrade the field to a `s3_file_field`. When your user chooses a file, it will be uploaded, with a progress indicator, directly into your S3 bucket (see `s3_file_field` gem for configuration). Your `form` will be disabled during the upload and re-enabled once upload completes. After this process, 4 new hidden form fields will be attached to your form:
+
+```
+<input type="file" name="user[avatar_direct_url]" value="https://....">
+<input type="file" name="user[avatar_file_name]" value="face.png">
+<input type="file" name="user[avatar_file_size]" value="162534">
+<input type="file" name="user[avatar_content_type]" value="image/png">
+```
+
+## Code changes to your app
+
+`s3ff` designed to minimize moving parts and code changes to your Rails app - all it does is give you 4 form fields in return for every direct s3 file upload that happened in your user's browser.
+
+How you deal with these form fields are entirely up to you. Here's a simple way:
+
+#### 1. Edit strong parameters
+
+If your controller was specifying
+
+```
+params.require(:user).permit(:avatar)
+```
+
+It would need to be changed to accept the new form fields
+
+```
+params.require(:user).permit(:avatar,
+  :avatar_direct_url,
+  :avatar_file_name,
+  :avatar_file_size,
+  :avatar_content_type
+)
+```
+
+#### 2. Upgrade model to also accept direct url
+
+If your model was originally
+
+```
+class User < ActiveRecord::Base
+  has_attached_file :avatar
+end
+```
+
+Download the file from S3 when given `avatar_direct_url`. This leave all your existing Paperclip code and logic unchanged.
+
+```
+class User < ActiveRecord::Base
+  has_attached_file :avatar
+
+  attr_accessor :avatar_direct_url
+  def avatar_direct_url=(value)
+    self.avatar = open(value) if value.present?
+  end
+end
+```
+
+
+
+### License
+
+This repository is MIT-licensed.

data/app/assets/javascripts/s3ff.js

@@ -0,0 +1,76 @@
+//= require s3_file_field
+//= require jsrender.min
+
+$(function() {
+
+  // adapted from http://www.html5rocks.com/en/tutorials/cors/
+  function iCanHasCORSRequest() {
+    var xhr = new XMLHttpRequest();
+    return (("withCredentials" in xhr) || (typeof XDomainRequest != "undefined"));
+  }
+  if (! iCanHasCORSRequest()) return;
+
+  var ready = function() {
+    var s3ff_init = function () {
+      if ($(this).hasClass('s3ff_enabled')) return;
+
+      var that = $(this).addClass('s3ff_enabled');
+      var multi = that.attr('multiple');
+      var label   = that.wrap($.templates($('#s3ff_label').html()).render()).parents('.s3ff_label').attr('for', that.attr('id'));
+      var wrap = that.wrap('<div></div>').parent();
+      var section = function(file, selector) {
+        var upload = label.find("#upload-" + file.unique_id);
+        return (selector ? upload.find(selector) : upload);
+      };
+
+      var s3ff_handlers = {
+        change: function(e, data) {
+          if (! multi) label.children('.s3ff_section').remove();
+        },
+        always: function(e, data) {
+          wrap.parents("form").find("[type='submit']").each(function() {
+            this.uploading = this.uploading || 0;
+            $(this).attr({'disabled': (--this.uploading > 0)});
+          });
+        },
+        add: function(e, data) {
+          wrap.parents("form").find("[type='submit']").each(function() {
+            this.uploading = this.uploading || 0;
+            $(this).attr({'disabled': (++this.uploading > 0)});
+          });
+          data.submit();
+        },
+        send: function(e, data) {
+          label.append($.templates($('#s3ff_upload').html()).render(data.files[0]));
+        },
+        done: function(e, data) {
+          var upload = section(data.files[0]);
+          var field_prefix = that.attr('name').replace(/\]$/, '');
+          upload.append($.templates($('#s3ff_done').html()).render(data, { field_prefix: field_prefix }));
+          upload.find('.s3ff_progress').hide();
+        },
+        fail: function(e, data) {
+          section(data.files[0], '.s3ff_progress').html($.templates($('#s3ff_fail').html()).render(data));
+        },
+        progress: function(e, data) {
+          var pct = (parseInt(data.loaded / data.total * 100, 10)) + "%";
+          section(data.files[0], '.s3ff_progress .s3ff_bar').css({width: pct}).text(pct);
+  }
+      };
+
+      var data = that.data('s3ff');
+      if (data) {
+        s3ff_handlers.send.apply(this, [null, data]);
+        s3ff_handlers.done.apply(this, [null, data]);
+      }
+
+      that.S3FileField(s3ff_handlers);
+    };
+
+    var selector = "[data-acl][data-aws-access-key-id]:not(.s3ff_enabled)";
+    $(selector).each(s3ff_init);
+    $(document).on("mouseenter mousedown touchstart", selector, s3ff_init);
+  };
+
+  $(document).on('page:change', ready);
+});

data/lib/s3ff/engine.rb

@@ -0,0 +1,4 @@
+module S3FF
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/s3ff/railtie.rb

@@ -0,0 +1,6 @@
+module S3FF
+  class Railtie < Rails::Railtie
+    initializer 'railtie.configure_rails_initialization' do |_app|
+    end
+  end
+end

data/lib/s3ff/version.rb

@@ -0,0 +1,3 @@
+module S3FF
+  VERSION = '0.9.0'
+end

data/lib/s3ff/view_helper.rb

@@ -0,0 +1,46 @@
+module S3FF
+  module ViewHelper
+    def include_s3ff_templates(map = { _direct_url: 'result.url', _file_name: 'result.filename', _file_size: 'result.filesize', _content_type: 'result.filetype' })
+      <<-EOM
+      <div style="display:none;">
+        <script id="s3ff_label" type="text/x-tmpl">
+          <label class="s3ff_label" style="display:block;"></label>
+        </script>
+        <script id="s3ff_upload" type="text/x-tmpl" data-jsv-tmpl="_0">
+          <div class="s3ff_section" id="upload-{{:unique_id}}" style="margin-top:1em;">
+            <div class="progress s3ff_progress">
+              <div class="progress-bar progress-bar-striped active s3ff_bar" style="width: 0%"></div>
+            </div>
+          </div>
+        </script>
+        <script id="s3ff_fail" type="text/x-tmpl">
+          <div class="progress-bar progress-bar-danger" style="width: 80%">
+            <span class="fa fa-exclamation-triangle"></span>
+            {{if failReason}}
+              {{:failReason}}
+            {{else}}
+              Upload failed!
+            {{/if}}
+          </div>
+        </script>
+        <script id="s3ff_done" type="text/x-tmpl">
+          <button class="close" data-dismiss="alert" style="margin-right:4px;" type="button">
+            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
+          </button>
+          <span class="form-control">
+            <span class="fa fa-file-o"></span>
+            {{:result.filename}}
+            {{if result.filesize}}
+            ({{:result.filesize}} bytes)
+            {{/if}}
+          </span>
+          <div style="display:none;">
+            #{map.collect {|k,v| "<input name=\"{{>~field_prefix}}#{k}]\" type=\"hidden\" value=\"{{:#{v}}}\" />" }.join}
+          </div>
+        </script>
+      </div>
+      EOM
+      .html_safe
+    end
+  end
+end

data/lib/s3ff.rb

@@ -0,0 +1,32 @@
+require 's3_file_field'
+require 's3ff/view_helper'
+require 's3ff/railtie'
+require 's3ff/engine'
+
+ActionView::Base.send(:include, S3FF::ViewHelper)
+
+S3FileField::FormBuilder.class_eval do
+  def s3_file_field_with_s3ff(method, options = {})
+    changes = @object.try(:changes) || {} # { attr => [old_value, new_value], ... }
+    if new_direct_url = changes["#{method}_direct_url"].try(:last)
+      # if *_direct_url_changed? it means we're re-rendering
+      # :. we should prepopulate the s3ff fields to avoid re-uploading
+      options[:data] ||= {}
+      options[:data].merge!({
+        s3ff: {
+          files: [{
+            unique_id: "#{@object_name.parameterize}#{SecureRandom.hex}",
+          }],
+          result: {
+            filename: changes["#{method}_file_name"].try(:last) || File.basename(new_direct_url),
+            filesize: changes["#{method}_file_size"].try(:last),
+            filetype: changes["#{method}_content_type"].try(:last),
+            url: new_direct_url,
+          }
+        }
+      })
+    end
+    s3_file_field_without_s3ff(method, options)
+  end
+  alias_method_chain :s3_file_field, :s3ff
+end

metadata

@@ -0,0 +1,107 @@
+--- !ruby/object:Gem::Specification
+name: s3ff
+version: !ruby/object:Gem::Version
+  version: 0.9.0
+platform: ruby
+authors:
+- Chew Choon Keat
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-10-27 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: s3_file_field
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.3.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.3.0
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.3'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.3'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Direct S3 upload using CORS with s3_file_field + paperclip
+email:
+- choonkeat@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- app/assets/javascripts/s3ff.js
+- lib/s3ff.rb
+- lib/s3ff/engine.rb
+- lib/s3ff/railtie.rb
+- lib/s3ff/version.rb
+- lib/s3ff/view_helper.rb
+homepage: https://github.com/choonkeat/s3ff
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.2
+signing_key: 
+specification_version: 4
+summary: Direct S3 upload using CORS with s3_file_field + paperclip
+test_files: []