Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

S3 Uploader Rails Example (uses the jQuery-File-Upload plugin)

branch: master
Octocat-spinner-32 app increased upload size limit and added ssl back - maybe this does the … May 10, 2012
Octocat-spinner-32 config added rake uploader deploy rake task February 22, 2012
Octocat-spinner-32 db use postMessage and display upload elements on host page February 20, 2012
Octocat-spinner-32 doc first commit February 16, 2012
Octocat-spinner-32 lib added rake uploader deploy rake task February 22, 2012
Octocat-spinner-32 log first commit February 16, 2012
Octocat-spinner-32 public first commit February 16, 2012
Octocat-spinner-32 script first commit February 16, 2012
Octocat-spinner-32 test first commit February 16, 2012
Octocat-spinner-32 vendor first commit February 16, 2012
Octocat-spinner-32 .DS_Store debug ie February 16, 2012
Octocat-spinner-32 .gitignore added basic readme February 22, 2012
Octocat-spinner-32 Gemfile first commit February 16, 2012
Octocat-spinner-32 Gemfile.lock first commit February 16, 2012
Octocat-spinner-32 README.rdoc Update README.rdoc October 07, 2012
Octocat-spinner-32 Rakefile first commit February 16, 2012
Octocat-spinner-32 config.ru first commit February 16, 2012
README.rdoc

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/

Features:

  • 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:

    ENV['S3_UPLOADER_BUCKET']
    ENV['S3_UPLOADER_ACCESS_KEY']
    ENV['S3_UPLOADER_SECRET_ACCESS_KEY']
  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 :)

Notes

  • 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.

Something went wrong with that request. Please try again.