javascript - Asynchronous uploading (HTTP POST) to Amazon S3: why aren't I getting the right callbacks? -
i'm attempting upload file asynchronously using http post , jquery, i'm running strange issue: can't right callback fire. when upload file, returns "ok" status code 201 and can access file on s3 bucket, jquery fires "error" callback every time. after inspecting xhr object little further, came across:
error: permission denied [http://192.168.2.247] property window.document [https://pentoolcn.aplusldesign.com.s3.amazonaws.com].
what causing this? code taken verbatim http://developer.amazonwebservices.com/connect/entry!default.jspa?categoryid=139&externalid=1434&fromsearchpage=true , synchronously (normal form submit , page refresh), worked perfectly.
my code below.
<?php // cdn service options amazon s3 "s3" or none "none" [default] $cdn_service_type = "s3"; $cdn_service_type = 'none'; $cdn_access_key = '[confidential]'; $cdn_secret_key = '[confidential]'; $cdn_bucket = '[confidential]'; $cdn_folder = '[confidential]'; // folder within bucket $cdn_acl = 'public-read'; $cdn_max_file_size = 20 * 1048576; // mb size limit $success_redirect = 'http://' . $_server['server_name'] . ($_server['server_port']=='' ? '' : ':') . $_server['server_port'] . '/' . 'index.php'/*$_server['server_self']*/ . '?ok' ; // sendfiles3.php url server root // process result transfer, if query string present $query = $_server['query_string']; // setup transfer form $exptime = time() + (1 * 60 * 60); // plus 1 hour (1 hour; 60 mins; 60secs) $exptimestr = gmdate('y-m-d\th:i:s\z', $exptime); //echo 'exptimestr: '. $exptimestr ."<br/>"; //echo 'success_redirect: '. $success_redirect ."<br/>"; // create policy document $policydoc = ' {"expiration": "' . $exptimestr . '", "conditions": [ {"acl": "' . $cdn_acl . '"}, {"bucket": "' . $cdn_bucket . '"}, {"success_action_status": "201"}, ["starts-with", "$key", "' . $cdn_folder . '"], [\'starts-with\', \'$folder\',\'\'], [\'starts-with\', \'$filename\', \'\'], [\'starts-with\',\'upload\', \'\'], ["content-length-range", 0, ' . $cdn_max_file_size . '], ] } '; // // removed success_action_redirect cause flash doesn't $policydocflash = ' {"expiration": "' . $exptimestr . '", "conditions": [ {"acl": "' . $cdn_acl . '"}, {"bucket": "' . $cdn_bucket . '"}, {"success_action_status": "201"}, ["starts-with", "$key", "' . $cdn_folder . '"], [\'starts-with\', \'$folder\',\'\'], [\'starts-with\', \'$filename\', \'\'], [\'starts-with\',\'upload\', \'\'], ["content-length-range", 0, ' . $cdn_max_file_size . '] ] } '; //echo "policydoc: " . $policydoc . '<br/>'; // remove crlfs policy document $policydoc = implode(explode('\r', $policydoc)); $policydoc = implode(explode('\n', $policydoc)); $policydoc64 = base64_encode($policydoc); // encode base 64 // create policy document signature $sigpolicydoc = base64_encode(hash_hmac("sha1", $policydoc64, $cdn_secret_key, true/*raw_output*/)); //echo "policydoc: " . $policydoc . '<br/>'; // remove crlfs policy document $policydocflash = implode(explode('\r', $policydocflash)); $policydocflash = implode(explode('\n', $policydocflash)); $policydoc64flash = base64_encode($policydocflash); // encode base 64 // create policy document signature $sigpolicydocflash = base64_encode(hash_hmac("sha1", $policydoc64flash, $cdn_secret_key, true/*raw_output*/)); ?> <html> <head> <title>s3 post form</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/uploadify.css" type="text/css" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery.uploadify.v2.1.4.min.js"></script> <script type="text/javascript" src="js/swfobject.js"></script> <script src="js/jquery.form.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function settype(){ document.getelementbyid("content-type").value = getmimetype(document.getelementbyid("file").value); } var cdn_bucket = "<?php echo($cdn_bucket); ?>"; $(document).ready(function() { $("#remote-form").submit(function() { console.log("submitting..."); $(this).ajaxsubmit({ url: "https://"+cdn_bucket+".s3.amazonaws.com/", target: '#response', success: function(response, status, xhr) { console.info("success!"); }, error: function(xhr, status, error) { console.error("failure."); }, completed: function(xhr, status) { console.log("done."); } }); return false }); }); </script> </head> <body> <div id="response" style="border: 1px solid black"></div> <?php $res = explode('&', $query); foreach($res $ss) { //echo 'ss: ' . $ss . '<br/>'; if(substr($ss,0,7) == 'bucket=') $qbucket = urldecode(substr($ss,7)); if(substr($ss,0,4) == 'key=') $qkey = urldecode(substr($ss,4)); } if($qbucket != '') { // show transfer results echo 'file transferred: ' . $qbucket . '/' . $qkey . '<br/><br/>'; $expires = time() + 1*24*60*60/*$expires*/; $resource = $qbucket."/".urlencode($qkey); $stringtosign = "get\n\n\n$expires\n/$resource"; //echo "stringtosign: $stringtosign<br/><br/>"; $signature = urlencode(base64_encode(hash_hmac("sha1", $stringtosign, $cdn_secret_key, true/*raw_output*/))); //echo "signature: $signature<br/><br/>"; $querystring = "<a href='http://s3.amazonaws.com/$resource?awsaccesskeyid=$cdn_access_key&expires=$expires&signature=$signature'>$bucket/$key</a>"; echo "url (private read): $querystring<br/><br/>"; echo 'url (public read) : http://s3.amazonaws.com/' . $qbucket . '/' . $qkey . '<br/><br/>'; } ?> <form id="remote-form" method="post" action="?" enctype="multipart/form-data"> <!-- amazon configuration --> <input type="hidden" name="key" value="<?php echo($cdn_folder.'${filename}'); ?>" /> <input type="hidden" name="awsaccesskeyid" value="<?php echo($cdn_access_key); ?>" /> <input type="hidden" name="acl" value="<?php echo($cdn_acl); ?>" /> <input type="hidden" name="success_action_status" value="201" /> <input type="hidden" name="policy" value="<?php echo($policydoc64); ?>" /> <input type="hidden" name="signature" value="<?php echo($sigpolicydoc); ?>" /> <input type="hidden" name="folder" value="" /> <input type="hidden" name="filename" value="" /> <!-- file data --> file upload s3: <input name="file" id="file_upload" type="file"> <br/><br/> <input type="submit" value="upload file s3"> </form> </body> </html>
after inspecting xhr object
that error looks same-origin-policy violation me. can form post domain, can't xhr other host js came from, , don't see xhr on sample linked.
Comments
Post a Comment