Skip to content

Instantly share code, notes, and snippets.

@mfellner

mfellner/index.html

Created November 19, 2014 10:41
Show Gist options
  • Save mfellner/8f02128f2d84640292b2 to your computer and use it in GitHub Desktop.
Save mfellner/8f02128f2d84640292b2 to your computer and use it in GitHub Desktop.
Download ZIP
AWS S3 Index
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table id="table">
<tbody>
<tr>
<td>Name</td>
<td>Size</td>
<td>Last Modified</td>
</tr>
</tbody>
</table>
<script src="//sdk.amazonaws.com/js/aws-sdk-2.0.0-rc13.min.js"></script>
<script type="text/javascript">
(function () {
'use strict';
var s3 = new AWS.S3();
s3.makeUnauthenticatedRequest('listObjects', {
Bucket: 'your-bucket-name',
Delimiter: '/'
}, function (err, data) {
if (err) {
console.log(err, err.stack);
}
else {
makeListing(data);
}
});
function makeListing(data) {
if (data.Contents) {
data.Contents.forEach(function (obj) {
addTableRow('table',
'<td>' + obj.Key + '</td>' +
'<td>' + obj.Size + '</td>' +
'<td>' + obj.LastModified + '</td>');
});
}
if (data.CommonPrefixes) {
data.CommonPrefixes.forEach(function (obj) {
addTableRow('table',
'<td><a href="' + obj.Prefix + '">' + obj.Prefix + '</a></td>' +
'<td></td>' +
'<td></td>');
});
}
}
function addTableRow(table, content) {
var tr = document.createElement('tr');
tr.innerHTML = content;
document.getElementById(table).appendChild(tr);
}
}());
</script>
</body>
</html>
@mfellner
Copy link
Author

Usage

  • Enable static website hosting
  • Set Index Document to index.html
  • Add List permission for Everyone
  • Add s3.GetObject permission for everyone
{
  "Sid": "AllowPublicReadAccess",
  "Effect": "Allow",
  "Principal": {
    "AWS": "*"
  },
  "Action": "s3:GetObject",
  "Resource": "arn:aws:s3:::your-bucket-name/*"
}
  • Add CORS rule for GET
<CORSRule>
    <AllowedOrigin>http://your-bucket-name.s3-website-eu-west-1.amazonaws.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>

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