Skip to content

Instantly share code, notes, and snippets.

@joaoffcosta
Created June 7, 2013 13:49
Show Gist options
  • Save joaoffcosta/5729398 to your computer and use it in GitHub Desktop.
Save joaoffcosta/5729398 to your computer and use it in GitHub Desktop.
How to use S3 browser upload using XMLHttpRequest
<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>
@Ekta-28
Copy link

Ekta-28 commented Jul 21, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment