Create a gist now

Instantly share code, notes, and snippets.

@schmatz /index.html Secret
Last active Jan 31, 2017

What would you like to do?
Image host code
<html>
<head>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.3.0.min.js"></script>
<script>
AWS.config.update({
accessKeyId: 'your-key-id',
secretAccessKey: 'your-secret-key',
region: 'your-region'
});
var S3 = new AWS.S3({params: {Bucket: 'your-bucket'}});
var Dynamo = new AWS.DynamoDB.DocumentClient({region: 'your-region'});
</script>
</head>
<body>
Image: <input type="file" id="file-chooser" />
<br>
Gallery: <input type="text" id="gallery-name" />
<br>
<button id="upload-button">Upload Image</button>
<button id="list-images">List images in gallery </button>
<ul id="image-list" />
<script>
// Fetch the gallery name from the gallery input
function getGalleryName() {
return document.getElementById('gallery-name').value;
}
// Grab a reference to the upload button
let uploadButton = document.getElementById('upload-button');
// Make the button respond to clicks
uploadButton.addEventListener('click', function() {
let fileChooser = document.getElementById('file-chooser');
let file = fileChooser.files[0];
// Check that the user has specified a file to upload
if (!file) {
alert("You must choose a file to upload!");
return;
}
// Check the MIME type is an image
if (file.type.indexOf("image") == -1) {
alert("You may only upload images");
return;
}
// Get the gallery name and check that it isn't empty
let galleryName = getGalleryName();
if (!galleryName) {
alert("You need to enter a gallery name");
return;
}
// Specify the S3 upload parameters
let params = {
Key: galleryName + '/' + file.name,
ContentType: file.type,
Body: file,
ACL: 'public-read'
};
// Upload the file
S3.upload(params, function(err, data) {
if (err) {
alert(err);
} else {
alert("Image uploaded successfully!");
}
});
});
// Get a reference to the button to list images
let listImagesButton = document.getElementById('list-images');
// Upon click, fetch the index from Dynamo and use that to
// fetch images in the specified gallery
listImagesButton.addEventListener('click', function() {
let galleryName = getGalleryName();
if (!galleryName) {
alert("Must enter a gallery name to list the images!");
return;
}
// Disable the list button so you can't perform multiple fetches at once
listImagesButton.disabled = true;
// Dispose of any images from previous fetches
emptyImageList();
// Fetch all images in the gallery, then re-enable the list button.
listImagesInGallery(galleryName, function(err) {
if (err) {
alert("Dynamo error: " + err);
}
listImagesButton.disabled = false;
});
})
// Fetch all images in the given gallery.
// `startKey` represents the exclusive start key of the Dynamo query.
// To start a new query, leave `startKey` undefined.
// This function recursively calls itself until there are no more query pages,
// and then runs the callback.
function listImagesInGallery(galleryName, cb, startKey) {
let params = {
TableName: 'your-index-name',
ProjectionExpression: 'file_path',
KeyConditionExpression: 'gallery = :galleryname',
ExpressionAttributeValues: {
":galleryname": galleryName
},
ExclusiveStartKey: startKey,
}
Dynamo.query(params, function (err, data) {
if (err) {
return cb(err);
}
for (item of data.Items) {
appendImageToList(item.file_path);
}
if (data.LastEvaluatedKey) { // need to fetch more data
listImagesInGallery(galleryName, cb, data.LastEvaluatedKey);
} else {
return cb(null);
}
})
}
// Add an image to the end of the image list
function appendImageToList(imagePath) {
let ul = document.getElementById('image-list');
let li = document.createElement('li');
let img = document.createElement('img');
img.src = 'https://s3-your-bucket-region.amazonaws.com/your-bucket-name/' + imagePath
img.style.maxWidth = "200px";
li.appendChild(img);
ul.appendChild(li);
}
// Remove all images from the image list
function emptyImageList() {
document.getElementById('image-list').innerHTML = '';
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment