Skip to content

Instantly share code, notes, and snippets.

@akaak

akaak/aws-js-sdk-sample.html

Last active November 20, 2016 01:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save akaak/196b636435b01c1cb57fecd589efcfa2 to your computer and use it in GitHub Desktop.
Save akaak/196b636435b01c1cb57fecd589efcfa2 to your computer and use it in GitHub Desktop.
Download ZIP
AWS Javascript SDK Sample
Raw
aws-js-sdk-sample.html
<!---
Sample.html file used with the AWS example located at: https://aws.amazon.com/developers/getting-started/browser/
Working sample with facebook app integration.
--->
<!DOCTYPE html>
<html>
<head>
<title>AWS SDK for JavaScript - Sample Application</title>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.12.min.js"></script>
</head>
<body>
<input type="file" id="file-chooser" />
<button id="upload-button" style="display:none">Upload to S3</button>
<div id="results"></div>
<div id="fb-root"></div>
<script type="text/javascript">
var appId = 'APPID';
var roleArn = 'arn:aws:iam::009658755555:role/ROLE-NAME';
var bucketName = 'bucket-name';
AWS.config.region = 'us-east-1';
var fbUserId;
var bucket = new AWS.S3({
params: {
Bucket: bucketName
}
});
var fileChooser = document.getElementById('file-chooser');
var button = document.getElementById('upload-button');
var results = document.getElementById('results');
button.addEventListener('click', function () {
var file = fileChooser.files[0];
if (file) {
results.innerHTML = '';
//Object key will be facebook-USERID#/FILE_NAME
var objKey = 'facebook-' + fbUserId + '/' + file.name;
var params = {
Key: objKey,
ContentType: file.type,
Body: file,
ACL: 'public-read'
};
bucket.putObject(params, function (err, data) {
if (err) {
results.innerHTML = 'ERROR: ' + err;
} else {
listObjs();
}
});
} else {
results.innerHTML = 'Nothing to upload.';
}
}, false);
function listObjs() {
var prefix = 'facebook-' + fbUserId;
bucket.listObjects({
Prefix: prefix
}, function (err, data) {
if (err) {
results.innerHTML = 'ERROR: ' + err;
} else {
var objKeys = "";
data.Contents.forEach(function (obj) {
objKeys += obj.Key + "<br>";
});
results.innerHTML = objKeys;
}
});
}
/*!
* Login to your application using Facebook.
* Uses the Facebook SDK for JavaScript available here:
* https://developers.facebook.com/docs/javascript/gettingstarted/
*/
window.fbAsyncInit = function () {
FB.init({
appId: appId
});
FB.login(function (response) {
bucket.config.credentials = new AWS.WebIdentityCredentials({
ProviderId: 'graph.facebook.com',
RoleArn: roleArn,
WebIdentityToken: response.authResponse.accessToken
});
fbUserId = response.authResponse.userID;
button.style.display = 'block';
});
};
// Load the Facebook SDK asynchronously
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<p>Facebook App related</p>
<div
class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment