AWS.config.update({
  accessKeyId: 'YOUR_ACCESS_KEY_ID',
  secretAccessKey: 'YOUR_SECRET_ACCESS_KEY'
});

window.URL = window.URL || window.webkitURL;

var BUCKET_NAME = "BUCKET_NAME",
  FOLDER_ROOT_PATH = "folder_root_path/",
  FILE_EXTENSION = ".jpg",
  ORIGINAL_SIZE = {w: 581, h: 608},
  IMAGE_SIZES = [{w: 160, h: 130}, {w: 169, h: 132}],
  FOLDER_IMAGE_SIZES = ["160x130", "169x132"],
  FOLDER_ORIGINAL_IMAGE_SIZE = ["581x608"];

var bucket = new AWS.S3({params: {Bucket: BUCKET_NAME}}),
  imageContainer = document.getElementById("cropped-images"),
  initialImageContainer = document.getElementById('initial-image'),
  fileChooser = document.getElementById('file-chooser'),
  uploadButton = document.getElementById('upload-button'),
  uuidContainer = document.getElementById('uuid'),
  initialImage;

fileChooser.addEventListener("change", function () {
  var files = this.files;
  if (files) {
    loadInitialImage(files[0]);
  }
});

function loadInitialImage(file) {
  var img = document.createElement("img");
  img.src = window.URL.createObjectURL(file);
  img.onload = function () {
    window.URL.revokeObjectURL(this.src);
    var container = document.createElement("div"),
      canvasUrl, canvas;

    for (var i = 0, len = FOLDER_IMAGE_SIZES.length; i < len; i++) {
      canvas = document.createElement("canvas");
      imgSize = IMAGE_SIZES[i];

      canvas.id = "image" + imgSize.w + "x" + imgSize.h;
      canvas.width = imgSize.w;
      canvas.height = imgSize.h;

      canvasUrl = drawCroppedImage(img, canvas, ORIGINAL_SIZE.w, ORIGINAL_SIZE.h, imgSize.w, imgSize.h);
      container.appendChild(canvas);
      canvas.url = canvasUrl;
    }
    imageContainer.appendChild(container);
  };

  initialImageContainer.appendChild(img);
  initialImage = file;
}

uploadButton.addEventListener('click', function () {
  var uuid,
    finalFilename,
    params;

  uuid = generateUUID(initialImage.name);
  uuidContainer.innerHTML = 'UUID: ' +  uuid;

  //Cropped images
  for (var i = 0, len = FOLDER_IMAGE_SIZES.length; i < len; i++) {
    var imgSize = IMAGE_SIZES[i],
      canvas = document.getElementById("image" + imgSize.w + "x" + imgSize.h);

    finalFilename = FOLDER_ROOT_PATH + FOLDER_IMAGE_SIZES[i] + "/" + uuid + FILE_EXTENSION;
    params = {Key: finalFilename, ContentType: "image/jpg", Body: dataURItoBlob(canvas.url)};
    uploadToBucket(params);
  }

  //Original imagesx
  finalFilename = FOLDER_ROOT_PATH + FOLDER_ORIGINAL_IMAGE_SIZE + "/" + uuid + FILE_EXTENSION;
  params = {Key: finalFilename, ContentType: initialImage.type, Body: initialImage};
  uploadToBucket(params);

}, false);

function dataURItoBlob(dataURI) {
  var binary = atob(dataURI.split(',')[1]);
  var array = [];
  for(var i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
  }
  return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}

function generateUUID() {
  var d = new Date().getTime();
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = (d + Math.random() * 16) % 16 | 0;
    d = Math.floor(d / 16);
    return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  });
}

function uploadToBucket(params) {
  bucket.upload(params, function (err, data) {});
}

function drawCroppedImage(img, canvas, sw, sh, dw, dh) {
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, sw, sh, 0, -dh * .15, dw, dh * 1.25);

  return canvas.toDataURL("image/jpeg");
}