cassiozen/slsFileUploadClient.html

## slsFileUploadClient.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>A File Upload Demo</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    body {
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    .aligner {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    #drop {
      height: 200px;
      width: 200px;
      border-radius: 100px;
      color: #fff;
      background-color: #baf;
      font-size: 20px;
      display: flex;
      align-items: center;
    }
  </style>
</head>
<body>
  <div class="aligner">
    <div id="drop">Drop files here.</div>
    <div id="list">
      <h1>Uploaded Files:</h1>
    </div>
  </div>

  <script type="text/javascript">
    var drop = document.getElementById('drop');
    var list = document.getElementById('list');
    var apiBaseURL = "https://74t3vol55c.execute-api.us-east-1.amazonaws.com/dev";

    function cancel(e) {
      e.preventDefault();
      return false;
    }

    function handleDrop(e){
      e.preventDefault();
      var dt    = e.dataTransfer;
      var files = dt.files;
      for (var i=0; i<files.length; i++) {
        var file = files[i];
        var reader = new FileReader();
        reader.addEventListener('loadend', function(e){
          fetch(apiBaseURL+"/requestUploadURL", {
            method: "POST",
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              name: file.name,
              type: file.type
            })
          })
          .then(function(response){
            return response.json();
          })
          .then(function(json){
            return fetch(json.uploadURL, {
              method: "PUT",
              body: new Blob([reader.result], {type: file.type})
            })
          })
          .then(function(){
            var uploadedFileNode = document.createElement('div');
            uploadedFileNode.innerHTML = '<a href="//s3.amazonaws.com/slsupload/'+ file.name +'">'+ file.name +'</a>';
            list.appendChild(uploadedFileNode);
          });
        });
        reader.readAsArrayBuffer(file);
      }
      return false;
    }

    // Tells the browser that we *can* drop on this target
    drop.addEventListener('dragenter', cancel);
    drop.addEventListener('dragover', cancel);
    drop.addEventListener('drop', handleDrop);

  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>A File Upload Demo</title>
	<style>
	html, body {
	height: 100%;
	margin: 0;
	}
	body {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}
	.aligner {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	}
	#drop {
	height: 200px;
	width: 200px;
	border-radius: 100px;
	color: #fff;
	background-color: #baf;
	font-size: 20px;
	display: flex;
	align-items: center;
	}
	</style>
	</head>
	<body>
	<div class="aligner">
	<div id="drop">Drop files here.</div>
	<div id="list">
	<h1>Uploaded Files:</h1>
	</div>
	</div>

	<script type="text/javascript">
	var drop = document.getElementById('drop');
	var list = document.getElementById('list');
	var apiBaseURL = "https://74t3vol55c.execute-api.us-east-1.amazonaws.com/dev";

	function cancel(e) {
	e.preventDefault();
	return false;
	}

	function handleDrop(e){
	e.preventDefault();
	var dt = e.dataTransfer;
	var files = dt.files;
	for (var i=0; i<files.length; i++) {
	var file = files[i];
	var reader = new FileReader();
	reader.addEventListener('loadend', function(e){
	fetch(apiBaseURL+"/requestUploadURL", {
	method: "POST",
	headers: {
	'Content-Type': 'application/json'
	},
	body: JSON.stringify({
	name: file.name,
	type: file.type
	})
	})
	.then(function(response){
	return response.json();
	})
	.then(function(json){
	return fetch(json.uploadURL, {
	method: "PUT",
	body: new Blob([reader.result], {type: file.type})
	})
	})
	.then(function(){
	var uploadedFileNode = document.createElement('div');
	uploadedFileNode.innerHTML = '<a href="//s3.amazonaws.com/slsupload/'+ file.name +'">'+ file.name +'</a>';
	list.appendChild(uploadedFileNode);
	});
	});
	reader.readAsArrayBuffer(file);
	}
	return false;
	}

	// Tells the browser that we can drop on this target
	drop.addEventListener('dragenter', cancel);
	drop.addEventListener('dragover', cancel);
	drop.addEventListener('drop', handleDrop);

	</script>
	</body>
	</html>