Blueimp

If you are uploading file to your server and then moving to Amazon S3 then you can choose 'direct upload to Amazon S3' option for your application to replace two steps to one. Also, one advantage of this is uploading directly to Amazon S3 will be faster as Amazon S3 will have enough bandwidth to take file. If you are looking for direct posting file by submitting form then you can follow steps given in Amazon AWS article "Browser Uploads to S3 using HTML POST Forms" but if you like to upload file without refreshing page using Ajax and Bluimp plugin there here is the code for this. To implement this functionality, first of all, you have to add CORS configuration to Amazon S3 bucket. http://www.example.com PUT POST DELETE * * GET You need to download Jquery and blueimp for this plugin. http://blueimp.github.io/jQuery-File-Upload/ <?php $bucket "s3.triotips.com"; $accesskey "AKIAILSadOUXCX6TU7IEVA"; $secret "JmCr3d1W4ZI/BzwOjAFk0AbvNgrk37FtlqxVH"; function getS3Policy() { $now strtotime(date("Y-m-d\TG:i:s")); $expire date('Y-m-d\TG:i:s\Z', strtotime('+30 minutes', $now)); $policy'{ "expiration": "' . $expire . '", "conditions": [ { "bucket": "s3.triotips.com" }, { "acl": "public-read" }, [ "starts-with", "any", "" ], { "success_action_status": "201" }, [ "starts-with", "$key", "" ] ] }'; return $policy; } /* * Calculate HMAC-SHA1 according to RFC2104 * See http://www.faqs.org/rfcs/rfc2104.html */ function hmacsha1($key,$data) { $blocksize64; $hashfunc'sha1'; if (strlen($key)>$blocksize) $keypack('H*', $hashfunc($key)); $keystr_pad($key,$blocksize,chr(0x00)); $ipadstr_repeat(chr(0x36),$blocksize); $opadstr_repeat(chr(0x5c),$blocksize); $hmac pack( 'H*',$hashfunc( ($key^$opad).pack( 'H*',$hashfunc( ($key^$ipad).$data ) ) ) ); return bin2hex($hmac); } /* * Used to encode a field for Amazon Auth * (taken from the Amazon S3 PHP example library) */ function hex2b64($str) { $raw ''; for ($i0; $i Upload file direct to Amazon S3 - Triotips.com Upload file : $(document).ready( function() { var ellipsisCount 1; var name ''; var hashName ''; $('.direct-upload').each( function() { var form $(this); $(this).fileupload({ url: form.attr('action'), type: 'POST', autoUpload: true, add: function (event, data) { // Use XHR, fallback to iframe options $(this).fileupload('option'); use_xhr !options.forceIframeTransport && ((!options.multipart && $.support.xhrFileUpload) || $.support.xhrFormDataFileUpload); if (!use_xhr) { alert('here'); using_iframe_transport true; } // Message on unLoad. window.onbeforeunload function() { alert('You have unsaved changes.'); return 'You have unsaved changes.'; }; var currentdate new Date(); var datetime "Start time: " + currentdate.getDay() + "/"+currentdate.getMonth() + "/" + currentdate.getFullYear() + " @ " + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds(); $('.log').append(" "+datetime); // Submit data.submit(); }, send: function(e, data) { }, progress: function(e, data){ // This is what makes everything really cool, thanks to that callback // you can now update the progress bar based on the upload progress var percent Math.round((e.loaded / e.total) * 100); var percentTemp $('#percentTemp').val(); if(percent > percentTemp) { $('#percentTemp').val(percent); if(percentTemp % 10 0) { var currentdate new Date(); var datetime currentdate.getDay() + "/"+currentdate.getMonth() + "/" + currentdate.getFullYear() + " @ " + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds(); $('.log').append(" "+percentTemp + '% ('+e.loaded/1000000+'MB of '+e.total/1000000+'MB) at time : '+datetime); } } $('.bar').css('width', percent + '%'); $('.bar').html(percent + '%'); }, fail: function(e, data) { window.onbeforeunload null; }, success: function(data) { // Here we get the file url on s3 in an xml doc var url $(data).find('Location').text() var currentdate new Date(); var datetime "Complete time: " + currentdate.getDay() + "/"+currentdate.getMonth() + "/" + currentdate.getFullYear() + " @ " + currentdate.getHours() + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds(); $('.log').append(" "+datetime); $('.log').append(" "+url); $('#real_file_url').val(url) // Update the real input in the other form }, done: function (event, data) { }, }); }); });

Upload file directly to Amazon S3 using PHP + Ajax + Jquery + blueimp