Flash-based Ajax-style Uploads to Amazon S3

POST upload support is a fairly new feature of S3. It was proposed in November 2007 and released for beta in December 2007. The documention is here.

This article documents some of the lessons I learned when integrating SWFUpload with S3. I’ve not got it working perfectly yet, but I’m very nearly there.

First, some background. Many sites already use S3 to store uploaded files, but until now this had required a two stage process:

  • The user has to wait for the file to upload to the site, and then for it to be copied over to S3. So when using an upload component with a progress indicator there will be an additional delay even after it reaches 100%.
  • Handling uploads in your app puts extra demand on your webserver

Direct uploads to S3 require a number of extra fields to be sent with the request. This is only supported in Flash 9. You cannot upload to S3 with Flash 8 or below.

Now, on to the implementation. Rather than trying to integrate everything at once, I recommend you take small steps:

First, get S3 uploads work using a standard file input button. Use this form generator to crytographically sign your upload policy, which gets sent with the request, and create your HTML. Note that whenever you make a chnage to the fields that get sent with your form, you’ll need to re-sign it.

Next, get SWFUpload working with a non-S3 site by studying the simple upload example. This will involve download all the necessary supporting files and making sure they’re in the right place.

Then there’s the fun try to combine the two. Here’s some important lessons I learned:

  • SWFUpload has a debug option but it does not display error pages returned by S3, only the status code. To see the error page, use a HTTP analyser such as Charles.
  • Host your swfupload.swf on your S3 account, then you don’t need to worry about crossdomain.xml
  • S3 expects the file post name to be “File” rather than SWFUpload’s default of “Filedata”. You can change this using the file_post_name parameter.

Now, here’s the reason why I’m almost there but not quite. S3 allows to your set the response code for a successful upload to be 200, 201 or 204. But SWFUpload considers 201 and 204 to be error responses. So that leaves 200. But it doesn’t like responses with an empty body, which 200 returns, so it will hang at 100% even though the upload is successful. So what do you do?

  • Be patient and wait for the new release of SWFUpload which should fix this
  • Compile your own version of SWFUpload to circumvent this as described here.

I plan to do the latter, and will share my modified SWFUpload here when done.

7 Responses to “Flash-based Ajax-style Uploads to Amazon S3”

  1. skunkwerk Says:

    thanks for the guide. what do you set the upload_url to?

    thanks

  2. Jason Says:

    Thanks for this post! It was very helpful.. I got swfupload working with S3, but it hangs at the end because of the empty 200 response from Amazon as you described. Have you solved this problem yet? I tried the new .swf posted in the SWFUpload discussion forum, but got the same result.

  3. uzi Says:

    which version of swfupload.swf did you use?
    i did the same by hosting the swf file at s3

    but strangely, i get an error “Could not find Flash element”
    I could access and download the swf file directly though

  4. Jesse Gavin Says:

    You said that you plan on sharing your modified SWF here. Would you still be willing to do so? Thanks.

  5. Daniel Says:

    I tried the custom swfupload (r749) that was supposed to fix the blank return on status 200. I’m still not getting the uploadSuccess or uploadComplete events to fire. Have you had any luck with that?

  6. Andy Says:

    Thanks for all the comments. Unfortunately I have been working on other projects and have not been able to investigate r749 yet.

  7. Aaron Says:

    I’ll PayPal $20 to the person who provides the final solution to this.

Leave a Reply