s3_direct_upload 0.0.3 → 0.0.5

data/README.md

@@ -22,7 +22,7 @@ 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>
@@ -62,7 +62,7 @@ jQuery ->
   $("#myS3Uploader").S3Uploader()
 ```
 
-Also place this template in the same view for the progress bars:
+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">
@@ -73,20 +73,14 @@ Also place this template in the same view for the progress bars:
 ```
 
 ## Options for form helper
-`post:` -> url in which is POST'd to after file is uploaded to S3. Example: model_url
-
-`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.
-
+* `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.
@@ -120,50 +114,66 @@ 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. Example: `{key: value}` 
-
-This would be accessable in your params hash as  `params[:key][:value]`
+* `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.
 
-`before_add` -> Callback function that executes before a file is added to the que. 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.
+### 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:
 
-```cofeescript
+```coffeescript
 jQuery ->
   v = $("#myS3Uploader").S3Uploader()
   ...
   v.path("new/path/") 
   v.additional_data("newdata")
+```
 
-### Global Event Hooks
+### Javascript Events Hooks
 
-When all uploads finish in a batch an `s3_uploads_complete` event will be triggered on `document`, so you could do something like:
-```javascript
-$(document).bind('s3_uploads_complete', function(){
-    ...
-    alert("All Uploads completed")
-}); 
-````
-### Example with all options.
-```cofeescript
-jQuery ->
-  $("#myS3Uploader").S3Uploader
-    path: 'path/to/my/files/on/s3'
-    additional_data: {key: 'value'}
-    before_add: myCallBackFunction() # must return true or false if set
+#### 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")
+```
 
 ## 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:
@@ -176,7 +186,6 @@ Ideas:
 
 
 ## 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!

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

@@ -18,6 +18,7 @@ $.fn.S3Uploader = (options) ->
     path: ''
     additional_data: null
     before_add: null
+    remove_completed_progress_bar: true
 
   $.extend settings, options
 
@@ -30,7 +31,7 @@ $.fn.S3Uploader = (options) ->
         current_files.push data
         file = data.files[0]
         unless settings.before_add and not settings.before_add(file)
-          data.context = $(tmpl("template-upload", file))
+          data.context = $(tmpl("template-upload", file)) if $('#template-upload').length > 0
           $uploadForm.append(data.context)
           data.submit()
 
@@ -40,32 +41,24 @@ $.fn.S3Uploader = (options) ->
           data.context.find('.bar').css('width', progress + '%')
 
       done: (e, data) ->
-        file = data.files[0]
-        domain = $uploadForm.attr('action')
-        path = settings.path + $uploadForm.find('input[name=key]').val().replace('/${filename}', '')
+        content = build_content_object $uploadForm, data.files[0], data.result
+
         to = $uploadForm.data('post')
-        content = {}
-        content[$uploadForm.data('as')] = domain + path + '/' + file.name
-        content.filename = file.name
-        content.filepath = path
-        if settings.additional_data
-          content = $.extend content, settings.additional_data
-        if 'size' of file
-          content.filesize = file.size
-        if 'type' of file
-          content.filetype = file.type
-
-        $.post(to, content)
-        data.context.remove() if data.context # remove progress bar
+        if to
+          content[$uploadForm.data('as')] = content.url
+          $.post(to, content)
+
+        data.context.remove() if data.context && settings.remove_completed_progress_bar # remove progress bar
+        $uploadForm.trigger("s3_upload_complete", [content])
 
         current_files.splice($.inArray(data, current_files), 1) # remove that element from the array
         if current_files.length == 0
           $(document).trigger("s3_uploads_complete")
 
       fail: (e, data) ->
-        alert("#{data.files[0].name} failed to upload.")
-        console.log("Upload failed:")
-        console.log(data)
+        content = build_content_object $uploadForm, data.files[0], data.result
+        content.error_thrown = data.errorThrown
+        $uploadForm.trigger("s3_upload_failed", [content])
 
       formData: (form) ->
         data = form.serializeArray()
@@ -80,6 +73,26 @@ $.fn.S3Uploader = (options) ->
 
         data
 
+  build_content_object = ($uploadForm, file, result) ->
+    domain = $uploadForm.attr('action')
+    content = {}
+    if result # Use the S3 response to set the URL to avoid character encodings bugs
+      path             = $('Key', result).text()
+      split_path       = path.split('/')
+      content.url      = domain + path
+      content.filename = split_path[split_path.length - 1]
+      content.filepath = split_path.slice(0, split_path.length - 1).join('/')
+    else # IE8 and IE9 return a null result object so we use the file object instead
+      path             = settings.path + $uploadForm.find('input[name=key]').val().replace('/${filename}', '')
+      content.url      = domain + path + '/' + file.name
+      content.filename = file.name
+      content.filepath = path
+
+    content.filesize   = file.size if 'size' of file
+    content.filetype   = file.type if 'type' of file
+    content = $.extend content, settings.additional_data if settings.additional_data
+    content
+
   #public methods
   @initialize = ->
     setUploadForm()

data/lib/s3_direct_upload/form_helper.rb

@@ -16,7 +16,7 @@ module S3DirectUpload
           aws_secret_access_key: S3DirectUpload.config.secret_access_key,
           bucket: S3DirectUpload.config.bucket,
           acl: "public-read",
-          expiration: 10.hours.from_now,
+          expiration: 10.hours.from_now.utc.iso8601,
           max_file_size: 500.megabytes,
           as: "file",
           key: key
@@ -33,7 +33,7 @@ module S3DirectUpload
           data: {
             post: @options[:post],
             as: @options[:as]
-          }
+          }.reverse_merge(@options[:data] || {})
         }
       end
 
@@ -44,6 +44,7 @@ module S3DirectUpload
           :policy => policy,
           :signature => signature,
           "AWSAccessKeyId" => @options[:aws_access_key_id],
+          success_action_status: "201"
         }
       end
 
@@ -68,7 +69,8 @@ module S3DirectUpload
             ["content-length-range", 0, @options[:max_file_size]],
             ["starts-with","$Content-Type",""],
             {bucket: @options[:bucket]},
-            {acl: @options[:acl]}
+            {acl: @options[:acl]},
+            {success_action_status: "201"}
           ]
         }
       end

data/lib/s3_direct_upload/version.rb

@@ -1,3 +1,3 @@
 module S3DirectUpload
-  VERSION = "0.0.3"
+  VERSION = "0.0.5"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: s3_direct_upload
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.5
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-10-15 00:00:00.000000000 Z
+date: 2012-12-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -66,7 +66,7 @@ dependencies:
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: 0.3.4
+        version: 0.3.5
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -74,7 +74,7 @@ dependencies:
     requirements:
     - - ~>
       - !ruby/object:Gem::Version
-        version: 0.3.4
+        version: 0.3.5
 description: Direct Upload to Amazon S3 With CORS and jquery-file-upload
 email:
 - w@waynehoover.com