Created
June 7, 2013 13:49
-
-
Save joaoffcosta/5729398 to your computer and use it in GitHub Desktop.
How to use S3 browser upload using XMLHttpRequest
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>S3 POST Form</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <script> | |
| var bucketName = 'MY_BUCKET_NAME'; | |
| var AWSKeyId = 'MY_AWS_KEY_ID'; | |
| var policy = 'MY_POLICY'; | |
| var signature = 'MY_SIGNATURE'; | |
| function S3ToolsClass() { | |
| var _handle_progress = null; | |
| var _handle_success = null; | |
| var _handle_error = null; | |
| var _file_name = null; | |
| this.uploadFile = function(file, progress, success, error) { | |
| _handle_progress = progress; | |
| _handle_success = success; | |
| _handle_error = error; | |
| _file_name = file.name; | |
| var fd = new FormData(); | |
| fd.append('key', "avatar/" + file.name); | |
| fd.append('AWSAccessKeyId', AWSKeyId); | |
| fd.append('acl', 'public-read'); | |
| fd.append('policy', policy); | |
| fd.append('signature', signature); | |
| fd.append('Content-Type', file.type); | |
| fd.append("file",file); | |
| var xhr = new XMLHttpRequest(); | |
| 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://' + bucketName + '.s3.amazonaws.com/', true); //MUST BE LAST LINE BEFORE YOU SEND | |
| xhr.setRequestHeader('Access-Control-Allow-Origin', '*'); | |
| xhr.send(fd); | |
| } | |
| function uploadProgress(evt) { | |
| if (evt.lengthComputable) { | |
| var percentComplete = Math.round(evt.loaded * 100 / evt.total); | |
| _handle_progress(percentComplete); | |
| } | |
| } | |
| function uploadComplete(evt) { | |
| if (evt.target.responseText == "") { | |
| _handle_success(_file_name); | |
| } else { | |
| _handle_error(evt.target.responseText); | |
| } | |
| } | |
| function uploadFailed(evt) { | |
| _handle_error("There was an error attempting to upload the file." + evt); | |
| } | |
| function uploadCanceled(evt) { | |
| _handle_error("The upload has been canceled by the user or the browser dropped the connection."); | |
| } | |
| } | |
| var S3Tools = new S3ToolsClass(); | |
| function uploadFile() { | |
| var file = document.getElementById('file').files[0]; | |
| S3Tools.uploadFile(file, handleProgress, handleSuccess, handleError); | |
| } | |
| function handleProgress(percentComplete) { | |
| document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'; | |
| } | |
| function handleSuccess(fileName) { | |
| document.getElementById('progressNumber').innerHTML = 'Done!'; | |
| document.getElementById('resultImage').setAttribute('src', 'https://' + bucketName + '.s3.amazonaws.com/avatar/' + fileName); | |
| } | |
| function handleError(message) { | |
| document.getElementById('progressNumber').innerHTML = 'Error: ' + message; | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <form id="form" enctype="multipart/form-data" method="post"> | |
| <div class="row"> | |
| 1. Select a File<br> | |
| <input type="file" name="file" id="file"/> | |
| </div> | |
| <br> | |
| <div class="row"> | |
| 2. Upload File<br> | |
| <input type="button" onclick="uploadFile()" value="Upload" /><span id="progressNumber"></span> | |
| </div> | |
| </div> | |
| <br> | |
| <div class="row"> | |
| 3. Check result | |
| <br> | |
| <img id="resultImage" src=""></img> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi
Can You tell me what will come in
var policy = 'MY_POLICY';
var signature = 'MY_SIGNATURE';
not able to understand.
Please its very critical for me to understand.