Upload directly to S3 with SWFUpload
I was working on an application earlier today that required allowing a user to upload a large file (several hundred MB) which would eventually be stored on Amazon S3. After reviewing the requirements, I realized it made sense to just upload the file directly to S3 instead of having to first stage the file on a server and then use PHP to push the file to S3.
Amazon has a nice walk through of using a plain HTML form to upload a file directly to S3 here.
I had all ready been using SWFUpload to upload files to the server so I decided to look into using it to uploading directly to S3. After some head banging, I finally got it to work - here’s the quick n dirty.
- Download SWFUpload 2.5
- Get SWFUpload ready to use in your project. Copy the SWF file somewhere accessible and include their swfupload.js Javascript file. More info here
- Setup an S3 bucket. You’ll need to set the policy to allow uploads from your own user (its the default).
- Place a crossdomain.xml file in the root of your S3 bucket. This file “authorizes” flash player to upload files into this host. The content of the file is below.
- Initialize the SWFUpload object (example below).
- Before beginning the upload, you need to set the appropriate postParams in the SWFUpload object. This is really the “magic” of this process. Example is below.
- Start the upload with startUpload()
Thats it! It’s pretty straight forward once you have things going. As an FYI, you can put SWFUpload into “debug” mode by adding debug: true as a property to the initialization object. You can also debug the responses from Amazon by using a packet sniffer like Wireshark.
crossdomain.xml
You probably want to make this file a little less permissive. More details here. Also note, there are differences in the implementation of the file between various versions of Flash player.
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" secure="false" />
</cross-domain-policy>Initialize SWFUpload
var swfu = new SWFUpload(
{ flash_url: "/assets/swfupload.swf",
flash9_url: "/assets/swfupload_fp9.swf",
file_size_limit: "1000 MB",
file_types: "*.*",
debug: false,
upload_url: "http://your-bucket.s3.amazonaws.com",
button_placeholder_id : "SWFUploadButton",
button_image_url : "/assets/select_filesbtn.png",
button_width: '112',
button_height: '33',
button_cursor : SWFUpload.CURSOR.HAND,
http_success : [201, 303, 200], /* Amazon returns a 303 on success */
file_post_name: "file", /* Amazon expects the file data to be in a input named "file"
file_queued_handler: function(f){
// track the filenames so you can upload them later
cachedUploadFiles[ f.index ] = f.name;
},
upload_complete_handler: function(e){ uploadSWFFile( ); },
upload_start_handler: function(e){
// reset the progress bar
$("#progressBar").progressbar( 'value', 0 );
},
upload_error_handler: function(e){
},
upload_progress_handler: function(f, c, t){
// update the progress bar as the process continues
$("#progressBar").progressbar( 'value', Math.ceil( ( c/t ) * 100 ) );
}
}); Set SWFUpload postParams
The HMAC signature MUST be calculated on the server because it uses your S3 secret. You MUST keep that value secret in order to maintain the security of your S3 buckets. I’m using Don Schonknecht’s S3 PHP library to calculate the HMAC signatures but you could just as easily do it in straight PHP.
<?php
/* In PHP */
$encodedPolicy = json_encode( array(
"expiration" => "2011-4-22T13:54:23.000Z",
"conditions" => array(
0 => array( "acl" => "public-read" ),
1 => array( "bucket" => "your-bucket" ),
2 => array( "x-amz-meta-sig" => 'some meta signature to ensure authentic requests'),
3 => array( "redirect" => $'URL to redirect a success request (its doesnt matter)' ),
4 => array( "key" => "the S3 key for the file (the S3 filename)" ),
5 => array( "Filename" => "The original filename of the file. THIS IS IMPORTANT." )
),
)
);
$encodedPolicy = base64_encode( $encodedPolicy );
$s3 = new S3( sfConfig::get("app_amazon_s3_id"), sfConfig::get("app_amazon_s3_secret") );
list($dist, $hmacSignature) = explode(":", $s3->__getSignature( $encodedPolicy ));
/* END PHP */
?>
<script>
var swfConfig = {
'AWSAccessKeyId': 'your amazon ID',
'acl': 'public-read',
'key': 'the S3 key for the file (the S3 filename)',
'policy': '<?php echo $encodedPolicy?>',
'signature': '<?php echo $signature'?>,
'redirect': 'URL to redirect a success request (its doesnt matter)',
'x-amz-meta-sig': 'some meta signature to ensure authentic requests',
};
// this line sets the post params so that SWFUpload will send the additional fields when it uploads the file.
$.swfu.setPostParams( swfConfig );
</script>