actionverb_s3_direct_upload 0.0.14

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: f90bbc7145b4048c5c0bf8989a9d309d9cf455fb
+  data.tar.gz: 7aaf4fedd67424def3acb816a0f98f82e7fef748
+SHA512:
+  metadata.gz: 561e3bd62e7c28a0e0d558b96bf76ed89e2f721578b36ab0963e1a069b383233918e946eebbd9be56ae8368f5d97838f99b11898296e081471f6ba617d9170ff
+  data.tar.gz: ad6833bf17aa8c103fa89f92acb03acf8b45494066102409a011734ae8c5c736415558342d9dd49ba28996bb15a98ca1f7c238b042069cfb86f24bc04fd69ba3

data/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2012 Wayne
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,201 @@
+# S3DirectUpload
+
+Easily generate a form that allows you to upload directly to Amazon S3.
+Multi file uploading supported by jquery-fileupload. 
+
+Code extracted from Ryan Bates' [gallery-jquery-fileupload](https://github.com/railscasts/383-uploading-to-amazon-s3/tree/master/gallery-jquery-fileupload).
+
+## Installation
+Add this line to your application's Gemfile:
+
+    gem 's3_direct_upload'
+
+Then add a new initalizer with your AWS credentials:
+
+**config/initalizers/s3_direct_upload.rb**
+```ruby
+S3DirectUpload.config do |c|
+  c.access_key_id = ""       # your access key id
+  c.secret_access_key = ""   # your secret access key
+  c.bucket = ""              # your bucket name
+end
+```
+
+Make sure your AWS S3 CORS settings for your bucket look something like this:
+```xml
+<CORSConfiguration>
+    <CORSRule>
+        <AllowedOrigin>http://0.0.0.0:3000</AllowedOrigin>
+        <AllowedMethod>GET</AllowedMethod>
+        <AllowedMethod>POST</AllowedMethod>
+        <AllowedMethod>PUT</AllowedMethod>
+        <MaxAgeSeconds>3000</MaxAgeSeconds>
+        <AllowedHeader>*</AllowedHeader>
+    </CORSRule>
+</CORSConfiguration>
+```
+In production the AllowedOrigin key should be your domain.
+
+Add the following js and css to your asset pipeline:
+
+**application.js.coffee**
+```coffeescript
+#= require s3_direct_upload
+```
+
+**application.css**
+```css
+//= require s3_direct_upload_progress_bars
+```
+
+## Usage
+Create a new view that uses the form helper `s3_uploader_form`:
+```ruby
+<%= s3_uploader_form post: model_url, as: "model[image_url]", id: "myS3Uploader" do %>
+  <%= file_field_tag :file, multiple: true %>
+<% end %>
+```
+
+Then in your application.js.coffee, call the S3Uploader jQuery plugin on the element you created above:
+```coffeescript
+jQuery ->
+  $("#myS3Uploader").S3Uploader()
+```
+
+Optionally, you can also place this template in the same view for the progress bars:
+```js+erb
+<script id="template-upload" type="text/x-tmpl">
+<div class="upload">
+  {%=o.name%}
+  <div class="progress"><div class="bar" style="width: 0%"></div></div>
+</div>
+</script>
+```
+
+## Options for form helper
+* `post:` url in which is POST'd to after file is uploaded to S3. If you don't specify this option, no callback to the server will be made after the file has uploaded to S3.
+* `as:` parameter value for the POST in which the key will be the URL of the file on S3. If for example this is set to "model[image_url]" then the data posted would be `model[image_url] : http://bucketname.s3.amazonws.com/filename.ext`
+* `key:` key on s3. defaults to `"uploads/#{SecureRandom.hex}/${filename}"`. needs to be at least `"${filename}"`.
+* `acl:` acl for files uploaded to s3, defaults to "public-read"
+* `max_file_size:` maximum file size, defaults to 500.megabytes
+* `id:` html id for the form, its recommended that you give the form an id so you can reference with the jQuery plugin.
+* `class:` optional html class for the form.
+* `data:` Optional html data
+
+### Persisting the S3 url
+It is recommended that you persist the image_url that is sent back from the POST request (to the url given to the `post` option and as the key given in the `as` option). So to access your files later.
+
+One way to do this is to make sure you have `resources model` in your routes file, and add the `image_url` (or whatever you would like to name it) attribute to your model, and then make sure you have the create action in your controller for that model.
+
+You could then have your create action render a javascript file like this:
+**create.js.erb**
+```ruby
+<% if @model.new_record? %>
+  alert("Failed to upload model: <%= j @model.errors.full_messages.join(', ').html_safe %>");
+<% else %>
+  $("#container").append("<%= j render(@model) %>");
+<% end %>
+```
+So that javascript code would be executed after the model instance is created, without a page refresh. See [@rbates's gallery-jquery-fileupload](https://github.com/railscasts/383-uploading-to-amazon-s3/tree/master/gallery-jquery-fileupload)) for an example of that method.
+
+Note: the POST request to the rails app also includes the following parameters `filesize`, `filetype`, `filename` and `filepath`.
+
+### Advanced Customizations
+Feel free to override the styling for the progress bars in s3_direct_upload_progress_bars.css, look at the source for inspiration.
+
+Also feel free to write your own js to interface with jquery-file-upload. You might want to do this to do custom validations on the files before it is sent to S3 for example.
+To do this remove `s3_direct_upload` from your application.js and include the necessary jquery-file-upload scripts in your asset pipeline (they are included in this gem automatically):
+```cofeescript
+#= require jquery-fileupload/basic
+#= require jquery-fileupload/vendor/tmpl
+```
+Use the javascript in `s3_direct_upload` as a guide.
+
+
+## Options for S3Upload jQuery Plugin
+
+* `path:` manual path for the files on your s3 bucket. Example: `path/to/my/files/on/s3`  
+  Note: the file path in your s3 bucket will effectively be `path + key`.
+* `additional_data:` You can send additional data to your rails app in the persistence POST request. This would be accessable in your params hash as  `params[:key][:value]`  
+  Example: `{key: value}` 
+* `remove_completed_progress_bar:` By default, the progress bar will be removed once the file has been successfully uploaded. You can set this to `false` if you want to keep the progress bar.
+* `before_add:` Callback function that executes before a file is added to the queue. It is passed file object and expects `true` or `false` to be returned. This could be useful if you would like to validate the filenames of files to be uploaded for example. If true is returned file will be uploaded as normal, false will cancel the upload.
+* `progress_container`: This jQuery container will have the compiled '#template-upload' appended to it during upload.
+
+### Example with all options.
+```coffeescript
+jQuery ->
+  $("#myS3Uploader").S3Uploader
+    path: 'path/to/my/files/on/s3'
+    additional_data: {key: 'value'}
+    remove_completed_progress_bar: false
+    before_add: myCallBackFunction() # must return true or false if set
+```
+
+### Public methods
+You can change the settings on your form later on by accessing the jQuery instance:
+
+```coffeescript
+jQuery ->
+  v = $("#myS3Uploader").S3Uploader()
+  ...
+  v.path("new/path/") 
+  v.additional_data("newdata")
+```
+
+### Javascript Events Hooks
+
+#### Successfull upload
+When a file has been successfully to S3, the `s3_upload_complete` is triggered on the form. A `content` object is passed along with the following attributes :
+
+* `url`       The full URL to the uploaded file on S3.
+* `filename`  The original name of the uploaded file.
+* `filepath`  The path to the file (without the filename or domain)
+* `filesize`  The size of the uploaded file.
+* `filetype`  The type of the uploaded file.
+
+This hook could be used for example to fill a form hidden field with the returned S3 url :
+```coffeescript
+$('#myS3Uploader').bind "s3_upload_complete", (e, content) ->
+  $('#someHiddenField').val(content.url)
+```
+
+#### Failed upload
+When an error occured during the transferm the `s3_upload_failed` is triggered on the form with the same `content` object is passed for the successful upload with the addition of the `error_thrown` attribute. The most basic way to handle this error would be to display an alert message to the user in case the upload fails :
+```coffeescript
+$('#myS3Uploader').bind "s3_upload_failed", (e, content) ->
+  alert("#{content.filename} failed to upload : #{content.error_thrown}")
+```
+
+#### All uploads completed
+When all uploads finish in a batch an `s3_uploads_complete` event will be triggered on `document`, so you could do something like:
+```coffeescript
+$(document).bind 's3_uploads_complete', ->
+    alert("All Uploads completed")
+```
+
+#### First upload started
+Fired `s3_uploads_start` once when any batch of uploads is starting.
+```coffeescript
+$('#myS3Uploader').bind 's3_uploads_start', (e) ->
+  $('uploadArea').show()
+```
+
+## Contributing / TODO
+This is just a simple gem that only really provides some javascript and a form helper. 
+This gem could go all sorts of ways based on what people want and how people contribute. 
+Ideas:
+* More specs! 
+* More options to control file types, ability to batch upload.
+* More convention over configuration on rails side
+* Create generators.
+* Model methods.
+* Model method to delete files from s3
+
+
+## Credit
+This gem is basically a small wrapper around code that [Ryan Bates](http://github.com/rbates) wrote for [Railscast#383](http://railscasts.com/episodes/383-uploading-to-amazon-s3). Most of the code in this gem was extracted from [gallery-jquery-fileupload](https://github.com/railscasts/383-uploading-to-amazon-s3/tree/master/gallery-jquery-fileupload). 
+
+Thank you Ryan Bates!
+
+This code also uses the excellecnt [jQuery-File-Upload](https://github.com/blueimp/jQuery-File-Upload), which is included in this gem by its rails counterpart [jquery-fileupload-rails](https://github.com/tors/jquery-fileupload-rails)

data/app/assets/javascripts/s3_direct_upload.js.coffee

@@ -0,0 +1,78 @@
+#= require jquery-fileupload/basic
+#= require jquery-fileupload/vendor/tmpl
+
+$ = jQuery
+
+$.fn.S3Uploader = (options) ->
+
+  # support multiple elements
+  if @length > 1
+    @each ->
+      $(this).S3Uploader options
+
+    return this
+
+  $uploadForm = this
+
+  settings =
+    path: ''
+    additional_data: null
+    remove_completed_progress_bar: true
+    progress_container: $uploadForm
+
+
+  $.extend settings, options
+
+  current_files = []
+
+  setUploadForm = ->
+    $uploadForm.fileupload
+
+      start: (e) ->
+        $uploadForm.trigger("s3_uploads_start", [e])
+
+      add: (e, data) ->
+        current_files.push data
+        if current_files.length == data.originalFiles.length
+          $uploadForm.trigger("s3_uploads_queued", [current_files])
+
+      progress: (e, data) ->
+        progress = parseInt(data.loaded / data.total * 100, 10)
+        data.context.find('.bar').css('width', progress + '%')
+
+      done: (e, data) ->
+        data.context.remove() if data.context && settings.remove_completed_progress_bar # remove progress bar
+        $uploadForm.trigger("s3_upload_complete", [data])
+
+        current_files.splice($.inArray(data, current_files), 1) # remove that element from the array
+        if current_files.length == 0
+          $(document).trigger("s3_uploads_complete")
+
+
+
+      formData: (form) ->
+        data = form.serializeArray()
+        fileType = ""
+        if "type" of @files[0]
+          fileType = @files[0].type
+        data.push
+          name: "Content-Type"
+          value: fileType
+
+        data[1].value = settings.path + data[1].value
+
+        data
+
+
+  #public methods
+  @initialize = ->
+    setUploadForm()
+    this
+
+  @path = (new_path) ->
+    settings.path = new_path
+
+  @additional_data = (new_data) ->
+    settings.additional_data = new_data
+
+  @initialize()

data/app/assets/javascripts/s3_direct_upload.js.js

@@ -0,0 +1,76 @@
+// Generated by CoffeeScript 1.6.3
+var $;
+
+$ = jQuery;
+
+$.fn.S3Uploader = function(options) {
+  var $uploadForm, current_files, setUploadForm, settings;
+  if (this.length > 1) {
+    this.each(function() {
+      return $(this).S3Uploader(options);
+    });
+    return this;
+  }
+  $uploadForm = this;
+  settings = {
+    path: '',
+    additional_data: null,
+    remove_completed_progress_bar: true,
+    progress_container: $uploadForm
+  };
+  $.extend(settings, options);
+  current_files = [];
+  setUploadForm = function() {
+    return $uploadForm.fileupload({
+      start: function(e) {
+        return $uploadForm.trigger("s3_uploads_start", [e]);
+      },
+      add: function(e, data) {
+        current_files.push(data);
+        if (current_files.length === data.originalFiles.length) {
+          return $uploadForm.trigger("s3_uploads_queued", [current_files]);
+        }
+      },
+      progress: function(e, data) {
+        var progress;
+        progress = parseInt(data.loaded / data.total * 100, 10);
+        return data.context.find('.bar').css('width', progress + '%');
+      },
+      done: function(e, data) {
+        if (data.context && settings.remove_completed_progress_bar) {
+          data.context.remove();
+        }
+        $uploadForm.trigger("s3_upload_complete", [data]);
+        current_files.splice($.inArray(data, current_files), 1);
+        if (current_files.length === 0) {
+          return $(document).trigger("s3_uploads_complete");
+        }
+      },
+      formData: function(form) {
+        var data, fileType;
+        data = form.serializeArray();
+        fileType = "";
+        if ("type" in this.files[0]) {
+          fileType = this.files[0].type;
+        }
+        data.push({
+          name: "Content-Type",
+          value: fileType
+        });
+        data[1].value = settings.path + data[1].value;
+        return data;
+      }
+    });
+  };
+  this.initialize = function() {
+    setUploadForm();
+    return this;
+  };
+  this.path = function(new_path) {
+    return settings.path = new_path;
+  };
+  this.additional_data = function(new_data) {
+    return settings.additional_data = new_data;
+  };
+  return this.initialize();
+};

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;
+    }
+  }
+}

data/lib/actionverb_s3_direct_upload.rb

@@ -0,0 +1 @@
+require File.dirname(__FILE__)+'/s3_direct_upload'

data/lib/s3_direct_upload.rb

@@ -0,0 +1,12 @@
+require 's3_direct_upload/version'
+require 'jquery-fileupload-rails' if defined?(Rails)
+
+require 'base64'
+require 'openssl'
+require 'digest/sha1'
+
+require 's3_direct_upload/config_aws'
+require 's3_direct_upload/form_helper'
+require 's3_direct_upload/engine' if defined?(Rails)
+
+ActionView::Base.send(:include, S3DirectUpload::UploadHelper) if defined?(ActionView::Base)

data/lib/s3_direct_upload/config_aws.rb

@@ -0,0 +1,18 @@
+require "singleton"
+
+module S3DirectUpload
+  class Config
+    include Singleton
+
+    ATTRIBUTES = [:access_key_id, :secret_access_key, :bucket]
+
+    attr_accessor *ATTRIBUTES
+  end
+
+  def self.config
+    if block_given?
+      yield Config.instance
+    end
+    Config.instance
+  end
+end

data/lib/s3_direct_upload/engine.rb

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

data/lib/s3_direct_upload/form_helper.rb

@@ -0,0 +1,95 @@
+module S3DirectUpload
+  module UploadHelper
+    def s3_uploader_form(options = {}, &block)
+      uploader = S3Uploader.new(options)
+      form_tag(uploader.url, uploader.form_options) do
+        uploader.fields.map do |name, value|
+          hidden_field_tag(name, value)
+        end.join.html_safe + capture(&block)
+      end
+    end
+
+    class S3Uploader
+      def initialize(options)
+        @additional_headers = options[:additional_headers] || []
+        @options = options.reverse_merge(
+          aws_access_key_id: S3DirectUpload.config.access_key_id,
+          aws_secret_access_key: S3DirectUpload.config.secret_access_key,
+          bucket: S3DirectUpload.config.bucket,
+          acl: "public-read",
+          expiration: 10.hours.from_now.utc.iso8601,
+          max_file_size: 64.gigabytes,
+          as: "file",
+          key: key
+        )
+      end
+
+      def form_options
+        {
+          id: @options[:id],
+          class: @options[:class],
+          method: "post",
+          authenticity_token: false,
+          multipart: true,
+          data: {
+            post: @options[:post],
+            as: @options[:as]
+          }.reverse_merge(@options[:data] || {})
+        }
+      end
+
+      def fields
+        fields = {
+          :key => @options[:key] || key,
+          :acl => @options[:acl],
+          :policy => policy,
+          :signature => signature,
+          "AWSAccessKeyId" => @options[:aws_access_key_id],
+          success_action_status: "201"
+        }
+        @additional_headers.each do |header|
+          fields[header[0]]=header[1]
+        end
+        fields
+      end
+
+      def key
+        @key ||= "uploads/#{SecureRandom.hex}/${filename}"
+      end
+
+      def url
+        "https://s3.amazonaws.com/#{@options[:bucket]}/"
+      end
+
+      def policy
+        Base64.encode64(policy_data.to_json).gsub("\n", "")
+      end
+
+      def policy_data
+        header_conditions = @additional_headers.map { |header| { header[0] => header[1] } }
+        conditions = [
+            ["starts-with", "$utf8", ""],
+            ["starts-with", "$key", ""],
+            ["content-length-range", 0, @options[:max_file_size]],
+            ["starts-with","$Content-Type",""],
+            {bucket: @options[:bucket]},
+            {acl: @options[:acl]},
+            {success_action_status: "201"}
+          ].concat(header_conditions)
+        {
+          expiration: @options[:expiration],
+          conditions: conditions 
+        }
+      end
+
+      def signature
+        Base64.encode64(
+          OpenSSL::HMAC.digest(
+            OpenSSL::Digest::Digest.new('sha1'),
+            @options[:aws_secret_access_key], policy
+          )
+        ).gsub("\n", "")
+      end
+    end
+  end
+end

data/lib/s3_direct_upload/version.rb

@@ -0,0 +1,3 @@
+module S3DirectUpload
+  VERSION = "0.0.14"
+end

metadata

@@ -0,0 +1,111 @@
+--- !ruby/object:Gem::Specification
+name: actionverb_s3_direct_upload
+version: !ruby/object:Gem::Version
+  version: 0.0.14
+platform: ruby
+authors:
+- Wayne Hoover
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-06-11 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: '3.2'
+- !ruby/object:Gem::Dependency
+  name: coffee-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 3.2.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 3.2.1
+- !ruby/object:Gem::Dependency
+  name: sass-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 3.2.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 3.2.1
+- !ruby/object:Gem::Dependency
+  name: jquery-fileupload-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 0.3.5
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 0.3.5
+description: Direct Upload to Amazon S3 With CORS and jquery-file-upload
+email:
+- w@waynehoover.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/actionverb_s3_direct_upload.rb
+- lib/s3_direct_upload.rb
+- lib/s3_direct_upload/form_helper.rb
+- lib/s3_direct_upload/engine.rb
+- lib/s3_direct_upload/version.rb
+- lib/s3_direct_upload/config_aws.rb
+- app/assets/stylesheets/s3_direct_upload_progress_bars.css.scss
+- app/assets/javascripts/s3_direct_upload.js.js
+- app/assets/javascripts/s3_direct_upload.js.coffee
+- LICENSE
+- README.md
+homepage: ''
+licenses: []
+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.0.0
+signing_key: 
+specification_version: 4
+summary: Gives a form helper for Rails which allows direct uploads to s3. Based on
+  RailsCast#383
+test_files: []