index.html

## index.html
<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>