Hi Davit,
Interesting results. I created a new bucket for this new experiment.
I put the php, html, and all support files therein.
The uploader loads just fine.
I drag and bunch of images onto the uploader and then click start upload.
The progress bar jumps into action and it accurately loops through the files and shows the total size. Perhaps it goes too fast... Just not sure what I should be looking for here.
I then click a button <input type="submit" value="Here goes nothin!"/>
The browser URL changes to the correct address of the s3.php so I think my paths are fine.
Fiddler shows and http 405 error as per (which is also rendered with the s3.php):
<Error>
<Code>MethodNotAllowed</Code>
−
<Message>
The specified method is not allowed against this resource.
</Message>
<ResourceType>OBJECT</ResourceType>
<Method>POST</Method>
<RequestId>AA599DD8D364C1DB</RequestId>
−
<HostId>
eAgROVNQ3AoHwr6Qmr9u9JnmccjLtxD49oESITcKh75PgahpjVJdqd2XfLrSMttp
</HostId>
</Error>
Due to my unfamiliarity with PHP and this process I am relying upon your expertise.
I am including my html & php pages below to hopefully determine whether or not this is truly possible. I am stuck and do not understand whether what I am trying to do is possible. Fiddler does seem to register all the files I want to upload it's just this 405 error which seems to imply it will not allow the post.
Also the inside of the s3.php PLUpload supplies seems geared towards the silverlight/flash cross domain methodology so... well I am just not sure what is going on and if I am missing something or this is just not allowed... 
I appreciate all your help Davit!
Thanks,
Cary
HTML Page with uploader on it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1 … tional.dtd">
<html>
<head>
<title>MultiTask123 Stylin' Multi-Select Uploads</title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<link rel="stylesheet" href="css/jquery.ui.plupload.css" type="text/css" />
<script src="Themeswitcher.js" type="text/javascript"></script>
</head>
<body id="top">
<!-- Thirdparty intialization scripts, needed for the Google Gears and BrowserPlus runtimes -->
<script src="jsdev/plupload.js" type="text/javascript"></script>
<script src="jsdev/jquery.plupload.queue.js" type="text/javascript"></script>
<script src="jsdev/jquery.ui.plupload.js" type="text/javascript"></script>
<script src="jsdev/plupload.html5.js" type="text/javascript"></script>
<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function() {
$("#uploader").plupload({
runtimes : 'html5',
url : 'http://<?php echo $bucket; ?>.s3.amazonaws.com/s3.php',
max_file_size : '10mb',
multipart: true,
multipart_params: {
'key': '${filename}', // use filename as a key
'Filename': '${filename}', // adding this to keep consistency across the runtimes
'acl': 'public-read',
'success_action_status': '201',
'AWSAccessKeyId' : '<?php echo $accessKeyId; ?>',
'policy': '<?php echo $policy; ?>',
'signature': '<?php echo $signature; ?>'
},
// !!!Important!!!
// this is not recommended with S3, since it will force Flash runtime into the mode, with no progress indication
//resize : {width : 800, height : 600, quality : 60}, // Resize images on clientside, if possible
// optional, but better be specified directly
file_data_name: 'file',
// re-use widget (not related to S3, but to Plupload UI Widget)
multiple_queues: true,
// Specify what files to browse for
filters : [
{title : "JPEG files", extensions : "jpg"}
]
});
});
</script>
<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function () {
$("#uploader").plupload({
// General settings
runtimes: 'html5',
max_file_size: '20000mb',
});
// Client side form validation
$('form').submit(function (e) {
var uploader = $('#uploader').pluploadQueue();
// Validate number of uploaded files
if (uploader.total.uploaded == 0) {
// Files in queue upload them first
if (uploader.files.length > 0) {
// When all files are uploaded submit form
uploader.bind('UploadProgress', function () {
if (uploader.total.uploaded == uploader.files.length)
$('form').submit();
});
uploader.start();
} else
alert('You must at least upload one file.');
e.preventDefault();
}
});
});
</script>
<div id="main">
<div class="center_wrapper">
<div id="main_content">
<form method="post" action="s3.php">
<input type="submit" value="YEAH RIGHT!" />
<div id="uploader" style="height: 330px;">
<p>You browser doesn't have HTML5 support. Please try our Flash or Aurigma uploader. We've got lots of sizes in stock! Cuz M3 Rocks!</p>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="Themeswitcher.js"></script>
<script type="text/javascript">
function isIE() {
if (navigator.appName == "Microsoft Internet Explorer") {
return true;
}
else {
return false;
}
}
if (!isIE()) {
$.fn.themeswitcher && $('<div></div>').css({
position: "absolute",
right: 10,
top: 10
}).appendTo('#main_content').themeswitcher({ cookieName: 'hero' });
}
else {
//alert('Reminder to krafty: Add HTML5 Test instead of IE Test. You have item Detect HTML 5 Features in your account');
alert('Reminder to krafty: Add HTML5 Test instead of IE Test. You have item Detect HTML 5 Features in your account\n\nThis uploader is HTML5 based & not supported by Internet Explorer. Please try the Flajaxian or Aurigma uploaders.\nAlthough it will display it will not work in IE.\nIt will work in latest Chrome, Firefox & Safari.');
}
</script>
</body>
</html>
////////////////////////////
PHP BELOW DAVIT..
///////////////////////////
<?php
$bucket = 'SampleForPLPUploaderForum';
// these can be found on your Account page, under Security Credentials > Access Keys
$accessKeyId = 'SampleForPLPUploaderForum';
$secret = 'SampleForPLPUploaderForum';
// hash_hmac — Generate a keyed hash value using the HMAC method
// (PHP 5 >= 5.1.2, PECL hash >= 1.1)
if (!function_exists('hash_hmac')) :
// based on: http://www.php.net/manual/en/function.sha1.php#39492
function hash_hmac($algo, $data, $key, $raw_output = false)
{
$blocksize = 64;
if (strlen($key) > $blocksize)
$key = pack('H*', $algo($key));
$key = str_pad($key, $blocksize, chr(0x00));
$ipad = str_repeat(chr(0x36), $blocksize);
$opad = str_repeat(chr(0x5c), $blocksize);
$hmac = pack('H*', $algo(($key^$opad) . pack('H*', $algo(($key^$ipad) . $data))));
return $raw_output ? $hmac : bin2hex($hmac);
}
endif;
// prepare policy
$policy = base64_encode(json_encode(array(
// ISO 8601 - date('c'); generates uncompatible date, so better do it manually
'expiration' => date('Y-m-d\TH:i:s.000\Z', strtotime('+1 day')),
'conditions' => array(
array('bucket' => $bucket),
array('acl' => 'public-read'),
array('starts-with', '$key', ''),
// for demo purposes we are accepting only images
array('starts-with', '$Content-Type', 'image/'),
// "Some versions of the Adobe Flash Player do not properly handle HTTP responses that have an empty body.
// To configure POST to return a response that does not have an empty body, set success_action_status to 201.
// When set, Amazon S3 returns an XML document with a 201 status code."
// http://docs.amazonwebservices.com/Amazo … Flash.html
array('success_action_status' => '201'),
// Plupload internally adds name field, so we need to mention it here
array('starts-with', '$name', ''),
// One more field to take into account: Filename - gets silently sent by FileReference.upload() in Flash
// http://docs.amazonwebservices.com/Amazo … Flash.html
array('starts-with', '$Filename', ''),
)
)));
// sign policy
$signature = base64_encode(hash_hmac('sha1', $policy, $secret, 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" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Plupload to Amazon S3 Example</title>
<!-- jQuery and jQuery UI -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<!-- Load plupload and all it's runtimes and finally the UI widget -->
<link rel="stylesheet" href="css/jquery.ui.plupload.css" type="text/css" />
<script type="text/javascript" src="../js/plupload.full.min.js"></script>
<script type="text/javascript" src="../js/jquery.ui.plupload.min.js"></script>
<!--<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>-->
</head>
<body>
</body>
</html>
(
)
