On 02.07.12, In 4, by Samuel east
Amazon S3 Flash Upload Multiple files direct upload progressbar swf
<?php
//include the S3 class
if (!class_exists('S3'))require_once('s3/S3.php');
define(AWS_ACCESS_KEY_ID,'Your user id');
define(AWS_SECRET_ACCESS_KEY,'Your secret key');
$S3_BUCKET = 'your bucket';
$isMacUser = (preg_match("/macintosh/",strtolower($_SERVER['HTTP_USER_AGENT'])) ? true : false);
if ( !isset($S3_BUCKET) || $S3_BUCKET == 'AWS_BUCKET' ) {
echo "Um, sorry, I need my configuration file. :( ";
exit(0);
}
$MAX_FILE_SIZE = 50 * 1048576;
$expTime = time() + (1 * 60 * 60);
$expTimeStr = gmdate('Y-m-dTH:i:sZ', $expTime);
$policyDoc = '{
"expiration": "' . $expTimeStr . '",
"conditions": [
{"bucket": "' . $S3_BUCKET . '"},
["starts-with", "$key", ""],
{"acl": "public-read"},
["content-length-range", 0, '. $MAX_FILE_SIZE .'],
{"success_action_status": "201"},
["starts-with", "$Filename", ""],
["starts-with", "$Content-Type", "image/"]
]
}';
$policyDoc = implode(explode('r', $policyDoc));
$policyDoc = implode(explode('n', $policyDoc));
$policyDoc64 = base64_encode($policyDoc);
$sigPolicyDoc = base64_encode(hash_hmac("sha1", $policyDoc64, AWS_SECRET_ACCESS_KEY, TRUE));
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Amazon S3 Upload</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/swfupload/swfupload.js"></script>
<script type="text/javascript" src="js/jquery.swfupload.js"></script>
<script type="text/javascript">
var trackFiles = [];
var trackFilesCount = 0;
var trackSentURL = false;
var forceDone = false;
var forceFile = null;
var master = null;
var MacMinSizeUpload = 150000; // 150k, this is not cool :(
var MacDelay = 10000; // 10 secs.
var isMacUser = <?php echo ($isMacUser ? 'true' : 'false'); ?>$$
$(function(){
$('#swfupload-control').swfupload({
upload_url: "http://<?=$S3_BUCKET?>.s3.amazonaws.com/",
post_params: {"AWSAccessKeyId":"<?=AWS_ACCESS_KEY_ID?>", "key":"${filename}", "acl":"public-read", "policy":"<?=$policyDoc64?>", "signature":"<?=$sigPolicyDoc?>","success_action_status":"201", "content-type":"image/"},
http_success : [201],
assume_success_timeout : <?php echo ($isMacUser ? 5 : 0); ?>,
file_post_name: 'file',
file_size_limit : "150000",
file_types : "",
file_types_description : "All files",
file_upload_limit : 10,
flash_url : "js/swfupload/swfupload.swf",
button_image_url : 'js/swfupload/wdp_buttons_upload_114x29.png',
button_width : 114,
button_height : 29,
button_placeholder : $('#button')[0],
debug: false
})
.bind('fileQueued', function(event, file){
var listitem='<li id="'+file.id+'" >'+
'File: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>'+
'<div class="progressbar" ><div class="progress" ></div></div>'+
'<p class="status" >Pending</p>'+
'<span class="cancel" > </span>'+
'</li>';
$('#log').append(listitem);
$('li#'+file.id+' .cancel').bind('click', function(){
var swfu = $.swfupload.getInstance('#swfupload-control');
swfu.cancelUpload(file.id);
$('li#'+file.id).slideUp('fast');
});
// start the upload since it's queued
$(this).swfupload('startUpload');
})
.bind('fileQueueError', function(event, file, errorCode, message){
alert('Size of the file '+file.name+' is greater than limit');
})
.bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
$('#queuestatus').text('Files Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued);
})
.bind('uploadStart', function(event, file){
$('#log li#'+file.id).find('p.status').text('Uploading...');
$('#log li#'+file.id).find('span.progressvalue').text('0%');
$('#log li#'+file.id).find('span.cancel').hide();
})
.bind('uploadProgress', function(event, file, bytesLoaded){
//Show Progress
var percentage=Math.round((bytesLoaded/file.size)*100);
$('#log li#'+file.id).find('div.progress').css('width', percentage+'%');
$('#log li#'+file.id).find('span.progressvalue').text(percentage+'%');
})
.bind('uploadSuccess', function(event, file, serverData){
var item=$('#log li#'+file.id);
item.find('div.progress').css('width', '100%');
item.find('span.progressvalue').text('100%');
var pathtofile='<a href="http://<?=$S3_BUCKET?>.s3.amazonaws.com/'+file.name+'" target="_blank" >view »</a>';
item.addClass('success').find('p.status').html('Done!!!');
})
.bind('uploadComplete', function(event, file){
// upload has completed, try the next one in the queue
$(this).swfupload('startUpload');
})
});
</script>
<style type="text/css" >
#content {
width: 300px;
text-align: center;
margin: auto;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
padding: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
margin-top: 150px;
}
h2 {
font-size: 19px;
font-weight: 300;
padding-top: 1em;
padding-bottom: .25em;
text-align:center;
}
#button {
z-index:0;
}
#swfupload-control p {
margin:10px 5px;
font-size:0.9em;
}
#log {
margin:0 0 10px 0;
padding:0;
width:300px;
}
#log li {
list-style-position:inside;
margin:2px;
border:1px solid #ccc;
padding:10px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
background:#fff;
position:relative;
}
#log li .progressbar {
border:1px solid #333;
height:10px;
background:#fff;
}
#log li .progress {
background:blue;
width:0%;
height:10px;
}
#log li p {
margin:0;
line-height:18px;
}
#log li.success {
border:1px solid #339933;
background:#ccf9b9;
}
#log li span.cancel {
position:absolute;
top:5px;
right:5px;
width:20px;
height:20px;
background:url('js/swfupload/cancel.png') no-repeat;
cursor:pointer;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<!--[if lte IE 6]><script src="js/ie6/warning.js"></script><script>window.onload=function(){e("js/ie6/")}</script><![endif]-->
<div id="content">
<h1>AMAZON S3 Direct Upload</h1>
<div id="swfupload-control">
<input type="button" id="button" />
<p id="queuestatus" ></p>
<ol id="log">
</ol>
</div>
<div class="clear"></div>
</div>
</body>
</html>Make sure your have all the requires and includes
your can get the S3 class for this link.
http://undesigned.org.za/2007/10/22/amazon-s3-php-class
and you can get the swf files from the following
http://code.google.com/p/swfupload/
Here is something that most people forget you need to add crossdomain.xml file to your upload bucket
Here is the crossdomain.xml that i used
<?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>
