S3SwfUpload Gem For Rails 3

S3SwfUpload allows user to upload a file to S3 directly, so you can save the cost of uploading process in your app server.

The flex application in this fork was completely re-written so that there are no flash or flex UI components. The one exception to that is the browse button, which, for security purposes MUST be flash. But even then, you get to pass the URLs for images to use for that button!

The goal of this re-write is to put the power to customize this powerful took back in the hands of non-flex-savvy developers. The look and feel is controlled by CSS, and any behavior is controlled by JavaScript. Flex only handles the file management portion. A nice result of this is that the flash file is only 46 kb, down from 288 kb. If you see any way that this can be done better, please don’t hesitate to let me know!

Example

Watch a video of an example app being built using the gem on Vimeo

There is also a demo app running on heroku at http://s3swfuploader.heroku.com/

Usage

1. Edit Gemfile and add this as a gem, you’ll also need aws-s3

gem 's3_swf_upload', :git => 'git://github.com/nathancolgate/s3-swf-upload-plugin'

2. Bundle it!

$ bundle install

3. Run the generator

$ rails generate s3_swf_upload:uploader

If you are using Rails 3.1, you will need to move the generated s3_upload.js from the public/javascripts directory to the app/assets/javascripts directory.

4. Configure your amazon parameters via the generated config/amazon_s3.yml file.

5. Make the bucket

There used to be a rake task for this, but it was removed so that there would be no dependency of aws/s3.

6. Upload the crossdomain.xml file

There used to be a rake task for this, but it was removed so that there would be no dependency of aws/s3.

Make sure the file is in the root and is publicly readable.

7. Note: you no longer need to edit app/controller/s3_uploads_controller.rb

In my tests in Rails 3, the application was able to correctly handle the requests from the flash object.

This means that your authentication systems can still be used to protect the signature generation.

8. Initialize the SWF object in your view using this handy helper:

<%=raw s3_swf_upload_tag %>

9. To achieve basic functionality, the only other thing you need is something to call the startUploading function. For example:

<input type="submit" value="Start Uploading" onclick="s3_swf_1_object.startUploading();" />

However, you will have no feedback or interface to let you know that anything is actually happening.

10. If you want to customise its behavior, here’s a more complex example

And the CSS to go along.

File Renaming

In my applications I upload all files to tmp folder and then have rails manipulate the file (renaming, resizing, etc). Here’s a starting point to give you an idea of what that looks like using Paperclip:

How to integrate with Paperclip

I prefer this solution because it allows the application to keep tabs on the files. However, if you are looking for a pure javascript solution, check out some of the forks of this project.

General Parameters

:buttonWidth (integer = 100)

:buttonHeight (integer = 30)

:flashVersion (string = ‘9.0.0’)

:queueSizeLimit (integer = 100)

Maximum number of files that can be added to the queue.

:fileSizeLimit (integer = 524288000)

Individual file size limit in bytes (default is 512 MB)

:fileTypes (string = ‘.’)

Something like this also works: '*.jpg;*.gif;*.png;'

:fileTypeDescs (string = ‘All Files’)

Something like this also works: 'Image files.'

:selectMultipleFiles (boolean = true)

Set this to false if you only want to allow users to pick one file at a time.

:keyPrefix (string = ’’)

String to be prepended to the uploaded file name to make the Amazon S3 key (location in bucket).

:signaturePath (string = ‘/s3_uploads.xml’)

Fully qualified path to the controller and action that will serve up the Amazon S3 signature

:swfFilePath (string = ‘/flash/s3_upload.swf’)

Fully qualified path to the SWF file (this is the one that does all the work).

:buttonUpPath (string = ‘/flash/s3_up_button.gif’)

Fully qualified path to an image to be used as the Browse Button (in the up state). Image should have same dimensions as the buttonWidth and buttonHeight parameters.

:buttonOverPath (string = ‘/flash/s3_over_button.gif’)

Fully qualified path to an image to be used as the Browse Button (in the over state). Image should have same dimensions as the buttonWidth and buttonHeight parameters.

:buttonDownPath (string = ‘/flash/s3_down_button.gif’)

Fully qualified path to an image to be used as the Browse Button (in the down state). Image should have same dimensions as the buttonWidth and buttonHeight parameters.

Callback Parameters

The real power of this refactoring is that the flex application makes all of the following calls to JavaScript. What you do with the calls is totally up to you:

:onFileAdd (file)
:onFileRemove (file)
:onFileSizeLimitReached (file)
:onFileNotInQueue (file)
:onQueueChange (queue)
:onQueueSizeLimitReached (queue)
:onQueueEmpty (queue)
:onQueueClear (queue)
:onUploadingStart ()
:onUploadingStop ()
:onUploadingFinish ()
:onSignatureOpen (file,event)
:onSignatureProgress (file,progress_event)
:onSignatureSecurityError (file,security_error_event)
:onSignatureComplete (file,event)
:onSignatureIOError (file,io_error_event)
:onSignatureHttpStatus (file,http_status_event)
:onSignatureXMLError (file,error_message)
:onUploadError (upload_options,error)
:onUploadOpen (upload_options,event)
:onUploadProgress (upload_options,progress_event)
:onUploadIOError (upload_options,io_error_event)
:onUploadHttpStatus (upload_options,http_status_event)
:onUploadSecurityError (upload_options,security_error_event)
:onUploadComplete (upload_options,event)

JavaScript Functions

The following functions can be called on the generated object. Normally the call looks something like this:

s3_swf_1_object.startUploading();

startUploading

Starts the uploading process

stopUploading

Stops the uploading process. Note: Stopping and restarting the uploading process is buggy. I’d avoid it.

clearQueue

Clears all files out of the queue.

removeFileFromQueue(integer)

Removes a specific file from the queue.

Will it work with < Rails 3?

You bet. The Rails 3 specific gem only makes installation and setup easier. Here are some tips for getting this to work with < Rails 3:

install it as a plugin script/plugin install git://github.com/nathancolgate/s3-swf-upload-plugin.git
copy the template files into your application (use the generator as a road map)
copy the view helpers into your applications /lib directory.
add the view helper and integer monkey patch to an initialization file:
require 'view_helpers' require 'patch/integer'
load the config file by adding this to the bottom of your environment.rb file: S3SwfUpload::S3Config.load_config
replace references to Rails.root or Rails.env in the /vendor/plugins/s3-swf-upload-plugin/lib/s3_swf_upload/s3_config.rb file.
comment out the require railties inside /vendor/plugins/s3-swf-upload-plugin/lib/s3_swf_upload.rb
you may need to require ‘s3_swf_upload’ and ‘aws/s3’ in your environment.rb file
your route will be map.resources instead of resources.

Known Issues

1. As much as I would like the interface to be 100% HTML, a (legitimate) security feature in Flash does not allow it:

“With Adobe Flash Player 10, the FileReference.browse and FileReference.download operations may be initiated only through ActionScript that originates from user interaction.” – Adobe TechNote

The next best thing I could come up with was to pass images in as buttons.

~~If the startUploading call is made after calling stopUploading, only the first file in the queue is successfully uploaded.~~

Kudos

Thanks to yickster (Nick Merwin) for fixing the stopUploading issue

jacobdam/s3-swf-upload-plugin