schmatz/index.html Secret

## 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>
	<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>