Create a gist now

Instantly share code, notes, and snippets.

@schmatz /index.html Secret
Last active Mar 15, 2018

What would you like to do?
Image host code
<script src=""></script>
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'});
Image: <input type="file" id="file-chooser" />
Gallery: <input type="text" id="gallery-name" />
<button id="upload-button">Upload Image</button>
<button id="list-images">List images in gallery </button>
<ul id="image-list" />
// 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!");
// Check the MIME type is an image
if (file.type.indexOf("image") == -1) {
alert("You may only upload images");
// Get the gallery name and check that it isn't empty
let galleryName = getGalleryName();
if (!galleryName) {
alert("You need to enter a gallery name");
// Specify the S3 upload parameters
let params = {
Key: galleryName + '/' +,
ContentType: file.type,
Body: file,
ACL: 'public-read'
// Upload the file
S3.upload(params, function(err, data) {
if (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!");
// Disable the list button so you can't perform multiple fetches at once
listImagesButton.disabled = true;
// Dispose of any images from previous fetches
// 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) {
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 = '' + imagePath = "200px";
// Remove all images from the image list
function emptyImageList() {
document.getElementById('image-list').innerHTML = '';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment