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