Skip to content
Browse files

convert javascript function to jQuery function. This is a much cleane…

…r approach, can now bind to multiple form elements with ease in a standard way. Documentation
  • Loading branch information...
1 parent 59cfa8b commit a96a0bcd127d651daf426f387502febf86563c7e Wayne committed Oct 6, 2012
Showing with 92 additions and 81 deletions.
  1. +24 −8 README.md
  2. +68 −72 app/assets/javascripts/s3_direct_upload.js.coffee
  3. +0 −1 lib/s3_direct_upload/form_helper.rb
View
32 README.md
@@ -38,9 +38,9 @@ In production the AllowedOrigin key should be your domain.
Add the following js and css to your asset pipeline:
-**application.js**
+**application.js.coffee**
```ruby
-//= require s3_direct_upload
+#= require s3_direct_upload
```
**application.css**
@@ -51,11 +51,17 @@ Add the following js and css to your asset pipeline:
## Usage
Create a new view that uses the form helper `s3_uploader_form`:
```ruby
-<%= s3_uploader_form post: model_url, as: "model[image_url]" do %>
+<%= 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.cofee, call the S3Uploader jQuery plugin on the element you created above:
+```cofeescript
+jQuery ->
+ $("#myS3Uploader").S3Uploader()
+```
+
Also place this template in the same view for the progress bars:
```javascript
<script id="template-upload" type="text/x-tmpl">
@@ -77,7 +83,7 @@ Also place this template in the same view for the progress bars:
`max_file_size:` -> maximum file size, defaults to 500.megabytes
-`id:` -> optional html id for the form.
+`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.
@@ -110,21 +116,31 @@ To do this remove `s3_direct_upload` from your application.js and include the ne
Use the javascript in `s3_direct_upload` as a guide.
-There are now also a few javascript options for customization directly built into s3_direct_upload:
+### Javscript options
+
+There are a few javascript options for customization for the S3Uploader jQuery plugin:
#### S3 Path
You can dynamically set the s3 file path:
-`S3Uploader.path = 'path/to/my/files/on/s3'`
+`path : 'path/to/my/files/on/s3'`
-The file path in your s3 bucket will effectively be `S3Uploader.path + key`.
+The file path in your s3 bucket will effectively be `path + key`.
#### Before Add File callback
-If you like to validate the filenames of files to be uploaded, you can hook into the uploader by setting the `S3Uploader.before_add` callback.
+If you like to validate the filenames of files to be uploaded, you can hook into the uploader by setting the `before_add` callback.
In your callback you can then either return true (upload file) or false (cancel upload).
+Here is an example using these options:
+```cofeescript
+jQuery ->
+ $("#myS3Uploader").S3Uploader
+ path: 'path/to/my/files/on/s3'
+ before_add: myCallBackFunction()
+```
+
#### Extra Data
You can send additional data to your rails app in the persistence post request by setting `S3Uploader.extra_data`
View
140 app/assets/javascripts/s3_direct_upload.js.coffee
@@ -2,75 +2,71 @@
#= require jquery-fileupload/vendor/tmpl
-@S3Uploader =
-
- path: ''
- extra_data: null
- before_add: null
-
- init: ->
-
- self = this
- $uploadForm = $('form[data-s3-direct-upload="true"]')
- current_files = []
-
- $uploadForm.fileupload
-
- add: (e, data) ->
- current_files.push data
- file = data.files[0]
- unless self.before_add and not self.before_add(file)
- data.context = $(tmpl("template-upload", file))
- $uploadForm.append(data.context)
- data.submit()
-
- progress: (e, data) ->
- if data.context
- progress = parseInt(data.loaded / data.total * 100, 10)
- data.context.find('.bar').css('width', progress + '%')
-
- done: (e, data) ->
- file = data.files[0]
- domain = $uploadForm.attr('action')
- path = self.path + $uploadForm.find('input[name=key]').val().replace('/${filename}', '')
- to = $uploadForm.data('post')
- content = {}
- content[$uploadForm.data('as')] = domain + path + '/' + file.name
- content.name = file.name
- content.path = path
- if self.extra_data
- content.extra_data = self.extra_data
- if 'size' of file
- content.file_size = file.size
- if 'type' of file
- content.file_type = file.type
-
- $.post(to, content)
- data.context.remove() if data.context # remove progress bar
-
- 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)
-
- 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 = self.path + data[1].value
-
- data
-
-
-jQuery ->
- S3Uploader.init()
-
+jQuery.fn.S3Uploader = (options) ->
+
+ $uploadForm = this
+
+ settings =
+ path: ''
+ extra_data: null
+ before_add: null
+
+ settings = $.extend settings, options
+
+ current_files = []
+
+ $uploadForm.fileupload
+
+ add: (e, data) ->
+ current_files.push data
+ file = data.files[0]
+ unless settings.before_add and not settings.before_add(file)
+ data.context = $(tmpl("template-upload", file))
+ $uploadForm.append(data.context)
+ data.submit()
+
+ progress: (e, data) ->
+ if data.context
+ progress = parseInt(data.loaded / data.total * 100, 10)
+ 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}', '')
+ to = $uploadForm.data('post')
+ content = {}
+ content[$uploadForm.data('as')] = domain + path + '/' + file.name
+ content.name = file.name
+ content.path = path
+ if settings.extra_data
+ content.extra_data = settings.extra_data
+ if 'size' of file
+ content.file_size = file.size
+ if 'type' of file
+ content.file_type = file.type
+
+ $.post(to, content)
+ data.context.remove() if data.context # remove progress bar
+
+ 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)
+
+ 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
View
1 lib/s3_direct_upload/form_helper.rb
@@ -31,7 +31,6 @@ def form_options
authenticity_token: false,
multipart: true,
data: {
- "s3-direct-upload" => true,
post: @options[:post],
as: @options[:as]
}

0 comments on commit a96a0bc

Please sign in to comment.
Something went wrong with that request. Please try again.