Skip to content

Commit

Permalink
Update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
waynehoover committed Aug 11, 2013
1 parent ef4234f commit b09511b
Showing 1 changed file with 25 additions and 18 deletions.
43 changes: 25 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ 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 callback_url: model_url, callback_param: "model[image_url]", id: "myS3Uploader" do %>
<%= s3_uploader_form callback_url: model_url, callback_param: "model[image_url]", id: "s3-uploader" do %>
<%= file_field_tag :file, multiple: true %>
<% end %>
```
Expand All @@ -63,7 +63,7 @@ Note: Its required that the file_field_tag is named 'file'.
Then in your application.js.coffee, call the S3Uploader jQuery plugin on the element you created above:
```coffeescript
jQuery ->
$("#myS3Uploader").S3Uploader()
$("#s3-uploader").S3Uploader()
```

Optionally, you can also place this template in the same view for the progress bars:
Expand All @@ -77,21 +77,28 @@ Optionally, you can also place this template in the same view for the progress b
```

## Options for form helper
* `callback_url:` url that 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.
* `callback_method:` Defaults to POST. Use PUT and remove the multiple option from your file field to update a model.
* `callback_param:` 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/{timestamp}-{unique_id}-#{SecureRandom.hex}/${filename}"`. `{timestamp}` and `{unique_id}` are special substitution params that will be populated by the javascript with values for the current upload. `${filename}` is a special s3 param that will be populated with the original upload file name. Needs to be at least `"${filename}"`. It is highly recommended to use both `{unique_id}`, which will prevent collisions when uploading files with the same name (such as from a mobile device, where every photo is named image.jpg), and a server-generated random value such as `#{SecureRandom.hex}`, which adds further collision protection with other uploaders.
* `key_starts_with:` constraint on key on s3. Defaults to `uploads/`. if you change the `key` option, make sure this starts with what you put there. If you set this as a blank string the upload path to s3 can be anything - not recommended!
* `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.
* `callback_url:` No default. The url that 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.
* `callback_method:` Defaults to `POST`. Use PUT and remove the multiple option from your file field to update a model.
* `callback_param:` Defaults to `file`. Parameter key for the POST to `callback_url` the value will be the full s3 url of the file. 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:` Defaults to `uploads/{timestamp}-{unique_id}-#{SecureRandom.hex}/${filename}`. It is the key, or filename used on s3. `{timestamp}` and `{unique_id}` are special substitution strings that will be populated by javascript with values for the current upload. `${filename}` is a special s3 string that will be populated with the original uploaded file name. Needs to be at least `"${filename}"`. It is highly recommended to use both `{unique_id}`, which will prevent collisions when uploading files with the same name (such as from a mobile device, where every photo is named image.jpg), and a server-generated random value such as `#{SecureRandom.hex}`, which adds further collision protection with other uploaders.
* `key_starts_with:` Defaults to `uploads/`. Constraint on the key on s3. if you change the `key` option, make sure this starts with what you put there. If you set this as a blank string the upload path to s3 can be anything - not recommended!
* `acl:` Defaults to `public-read`. The AWS acl for files uploaded to s3.
* `max_file_size:` Defaults to `500.megabytes`. Maximum file size allowed.
* `id:` Optional 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 attribute hash.

### Example with all options
```ruby
<%= s3_uploader_form callback_url: model_url, callback_method: "POST", callback_param: "model[image_url]", key: "files/{timestamp}-{unique_id}-#{SecureRandom.hex}/${filename}", key_starts_with: "files/", acl: "public_read", max_file_size: 50.megabytes, id: "s3-uploader", class: "upload-form", data: {:key => :val} do %>
<%= file_field_tag :file, multiple: true %>
<% end %>
```
### Example to persist the S3 url in your rails app
It is recommended that you persist the url that is sent via the POST request (to the url given to the `callback_url` option and as the key given in the `callback_param` option).
One way to do this is to make sure you have `resources model` in your routes file, and add a `s3_url` (or something similar) attribute to your model. Then make sure you have the create action in your controller for that model that saves the url from the callback_param.
You could then have your create action render a javascript file like this:
**create.js.erb**
Expand Down Expand Up @@ -130,7 +137,7 @@ Use the javascript in `s3_direct_upload` as a guide.
* `progress_bar_target:` The jQuery selector for the element where you want the progress bars to be appended to. Default is the form element.
* `click_submit_target:` The jQuery selector for the element you wish to add a click handler to do the submitting instead of submiting on file open.
### Example with all options.
### Example with all options
```coffeescript
jQuery ->
$("#myS3Uploader").S3Uploader
Expand Down

0 comments on commit b09511b

Please sign in to comment.