Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Got Amazon S3 &amp; CORS working on js and html5 using XMLHTTPObject based on this article <a href="http://bencoe.tumblr.com/post/30685403088/browser-side-amazon-s3-uploads-using-cors" rel="noreferrer">article</a>. </p> <p>1: CORS only works from a proper URL "<a href="http://localhost" rel="noreferrer">http://localhost</a>". (file///xyz will make you go insane)</p> <p>2 : Make sure you got the POLICY and Secret compiled correctly - here is my policy and this is the link you can get the project to get you started with <a href="http://www.tweetegy.com/2012/01/save-an-image-file-directly-to-s3-from-a-web-browser-using-html5-and-backbone-js/" rel="noreferrer">Signature and Policy </a> -- do not publish this JS with your Secret EVER!</p> <pre><code>POLICY_JSON = { "expiration": "2020-12-01T12:00:00.000Z", "conditions": [ {"bucket": this.get('bucket')}, ["starts-with", "$key", ""], {"acl": this.get('acl')}, ["starts-with", "$Content-Type", ""], ["content-length-range", 0, 524288000] ] }; var secret = this.get('AWSSecretKeyId'); var policyBase64 = Base64.encode(JSON.stringify(POLICY_JSON)); console.log ( policyBase64 ) var signature = b64_hmac_sha1(secret, policyBase64); b64_hmac_sha1(secret, policyBase64); console.log( signature); </code></pre> <p>Here is the JS code</p> <pre><code>function uploadFile() { var file = document.getElementById('file').files[0]; var fd = new FormData(); var key = "events/" + (new Date).getTime() + '-' + file.name; fd.append('key', key); fd.append('acl', 'public-read'); fd.append('Content-Type', file.type); fd.append('AWSAccessKeyId', 'YOUR ACCESS KEY'); fd.append('policy', 'YOUR POLICY') fd.append('signature','YOUR SIGNATURE'); fd.append("file",file); var xhr = getXMLHTTPObject(); xhr.upload.addEventListener("progress", uploadProgress, false); xhr.addEventListener("load", uploadComplete, false); xhr.addEventListener("error", uploadFailed, false); xhr.addEventListener("abort", uploadCanceled, false); xhr.open('POST', 'https://&lt;yourbucket&gt;.s3.amazonaws.com/', true); //MUST BE LAST LINE BEFORE YOU SEND xhr.send(fd); } </code></pre> <p>Helper functions</p> <pre><code>function uploadProgress(evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'; } else { document.getElementById('progressNumber').innerHTML = 'unable to compute'; } } function uploadComplete(evt) { /* This event is raised when the server send back a response */ alert("Done - " + evt.target.responseText ); } function uploadFailed(evt) { alert("There was an error attempting to upload the file." + evt); } function uploadCanceled(evt) { alert("The upload has been canceled by the user or the browser dropped the connection."); } </code></pre> <p>Then the HTML Form </p> <pre><code> &lt;form id="form1" enctype="multipart/form-data" method="post"&gt; &lt;div class="row"&gt; &lt;label for="file"&gt;Select a File to Upload&lt;/label&gt;&lt;br /&gt; &lt;input type="file" name="file" id="file" onchange="fileSelected()"/&gt; &lt;/div&gt; &lt;div id="fileName"&gt;&lt;/div&gt; &lt;div id="fileSize"&gt;&lt;/div&gt; &lt;div id="fileType"&gt;&lt;/div&gt; &lt;div class="row"&gt; &lt;input type="button" onclick="uploadFile()" value="Upload" /&gt; &lt;/div&gt; &lt;div id="progressNumber"&gt;&lt;/div&gt; </code></pre> <p></p> <p>Happy CORS-ing!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload