S3 Uploader Rails Example (uses the jQuery-File-Upload plugin)
JavaScript Ruby
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
app increased upload size limit and added ssl back - maybe this does the … May 10, 2012
test first commit Feb 16, 2012
vendor first commit Feb 16, 2012
.DS_Store debug ie Feb 16, 2012
.gitignore added basic readme Feb 22, 2012
Gemfile first commit Feb 16, 2012
Gemfile.lock first commit Feb 16, 2012
README.rdoc Update README.rdoc Oct 7, 2012


S3 Uploader Rails Example

Check the s3_direct_upload gem github.com/waynehoover/s3_direct_upload for an easier solution using Amazon's new CORS feature.

Based on the great jQuery File Upload plugin: blueimp.github.com/jQuery-File-Upload/


  • No flash :)

  • Uploads straight to S3 without hitting the server first

  • File Progress Indicator (Chrome, Firefox, Safari)

  • Multiple file selection, parallel upload (Chrome, Firefox, Safari)

  • Drag'n'Drop (Chrome, Firefox 4+, Safari 5+ - buggy on windows)

  • Internet Explorer and Opera fall back to iframe transport single file uploads

Tested with Chrome, Firefox, Safari, Opera and IE 8

Gets around S3's lacking cross domain access header support by storing the upload form on s3, embedded in an iframe. Upload progress is displayed on the host server by utilizing postMessage browser communication.

After a file is uploaded a post ajax request is made to create a resource for the uploaded file in the db.

Getting Started

  1. Install gems

    bundle install
  2. Migrate database

    bundle exec rake db:migrate
  3. Make sure the following environment variables are set:

  4. Set your server host in app/assets/javascripts/s3_uploader/s3_uploader.js:

    var host = 'http://yourdomain.com';
  5. Deploy uploader javascript and form to s3

    bundle exec rake uploader:deploy
  6. Run or deploy the app :)


  • The uploader location on s3 is currently hardcoded to /uploader.

  • The path for the uploaded files defaults to “#{controller_name}/:uuid” and can be changed in the s3_uploader helper options via the :uploaded_files_path parameter. Currently the path must have the :uuid placeholder in it. It is replaced with a random string for each uploaded file, to obfuscate the file locations and to prevent overwriting existing files.

  • There is no progress bar in Safari yet, as I'm using the progress tag which is not supported by Safari. Feel free to add a fallback bar and send me a pull request. ;-)

  • For some reason in Chrome only the last upload of multiple parallel uploads can be cancelled. Other uploads can be removed from the progress list, but their upload still continues. Firefox doesn't show this odd behaviour. All uploads can be canceled there as expected. I filed a bug here: code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20Area%20Feature%20Status%20Owner%20Summary&groupby=&sort=&id=114879

  • S3 is very particular about what params have to accompany a file upload. Specifically, the policy, the bucket, the signature, & the access key.

  • The signature is the trickiest to generate. The signature is a Base64 encoded hash of the S3 policy using your S3 secret access key. This signature in the s3_signature method in the UploadsHelper class. The s3_uploader method in the UploadsHelper class generates the iframe with the necessary params.