stephenhowells/gist:6604943

## gistfile1.txt
<html>
  <head>
    <title>S3 POST Form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script>
      var bucketName = 'MY_BUCKET_NAME';
      var AWSKeyId   = 'MY_AWS_KEY_ID';
      var policy     = 'MY_POLICY';
      var signature  = 'MY_SIGNATURE';

      function S3ToolsClass() {
        var _handle_progress = null;
        var _handle_success  = null;
        var _handle_error    = null;
        var _file_name       = null;

        this.uploadFile = function(file, progress, success, error) {
          _handle_progress = progress;
          _handle_success  = success;
          _handle_error    = error;
          _file_name       = file.name;

          var fd = new FormData();
          fd.append('key', "avatar/" + file.name);
          fd.append('AWSAccessKeyId', AWSKeyId);
          fd.append('acl', 'public-read');
          fd.append('policy', policy);
          fd.append('signature', signature);
          fd.append('Content-Type', file.type);
          fd.append("file",file);

          var xhr = new XMLHttpRequest();
          xhr.upload.addEventListener("progress", uploadProgress, false);
          xhr.addEventListener("load", uploadComplete, false);
          xhr.addEventListener("error", uploadFailed, false);
          xhr.addEventListener("abort", uploadCanceled, false);
          xhr.open('POST', 'https://' + bucketName + '.s3.amazonaws.com/', true); //MUST BE LAST LINE BEFORE YOU SEND
          xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
          xhr.send(fd);
        }

        function uploadProgress(evt) {
          if (evt.lengthComputable) {
            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            _handle_progress(percentComplete);
          }
        }

        function uploadComplete(evt) {
          if (evt.target.responseText == "") {
            _handle_success(_file_name);
          } else {
            _handle_error(evt.target.responseText);
          }
        }

        function uploadFailed(evt) {
          _handle_error("There was an error attempting to upload the file." + evt);
        }

        function uploadCanceled(evt) {
          _handle_error("The upload has been canceled by the user or the browser dropped the connection.");
        }
      }
      var S3Tools = new S3ToolsClass();

      function uploadFile() {
        var file = document.getElementById('file').files[0];
        S3Tools.uploadFile(file, handleProgress, handleSuccess, handleError);
      }

      function handleProgress(percentComplete) {
        document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
      }

      function handleSuccess(fileName) {
        document.getElementById('progressNumber').innerHTML = 'Done!';
        document.getElementById('resultImage').setAttribute('src', 'https://' + bucketName + '.s3.amazonaws.com/avatar/' + fileName);
      }

      function handleError(message) {
        document.getElementById('progressNumber').innerHTML = 'Error: ' + message;
      }
    </script>
  </head>
  <body>
    <form id="form" enctype="multipart/form-data" method="post">
      <div class="row">
        1. Select a File<br>
        <input type="file" name="file" id="file"/>
      </div>
      <br>
      <div class="row">
        2. Upload File<br>
        <input type="button" onclick="uploadFile()" value="Upload" /><span id="progressNumber"></span>
      </div>
    </div>
    <br>
    <div class="row">
      3. Check result
      <br>
      <img id="resultImage" src=""></img>
    </div>
  </body>
</html>
	<html>
	<head>
	<title>S3 POST Form</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script>
	var bucketName = 'MY_BUCKET_NAME';
	var AWSKeyId = 'MY_AWS_KEY_ID';
	var policy = 'MY_POLICY';
	var signature = 'MY_SIGNATURE';

	function S3ToolsClass() {
	var _handle_progress = null;
	var _handle_success = null;
	var _handle_error = null;
	var _file_name = null;

	this.uploadFile = function(file, progress, success, error) {
	_handle_progress = progress;
	_handle_success = success;
	_handle_error = error;
	_file_name = file.name;

	var fd = new FormData();
	fd.append('key', "avatar/" + file.name);
	fd.append('AWSAccessKeyId', AWSKeyId);
	fd.append('acl', 'public-read');
	fd.append('policy', policy);
	fd.append('signature', signature);
	fd.append('Content-Type', file.type);
	fd.append("file",file);

	var xhr = new XMLHttpRequest();
	xhr.upload.addEventListener("progress", uploadProgress, false);
	xhr.addEventListener("load", uploadComplete, false);
	xhr.addEventListener("error", uploadFailed, false);
	xhr.addEventListener("abort", uploadCanceled, false);
	xhr.open('POST', 'https://' + bucketName + '.s3.amazonaws.com/', true); //MUST BE LAST LINE BEFORE YOU SEND
	xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
	xhr.send(fd);
	}

	function uploadProgress(evt) {
	if (evt.lengthComputable) {
	var percentComplete = Math.round(evt.loaded * 100 / evt.total);
	_handle_progress(percentComplete);
	}
	}

	function uploadComplete(evt) {
	if (evt.target.responseText == "") {
	_handle_success(_file_name);
	} else {
	_handle_error(evt.target.responseText);
	}
	}

	function uploadFailed(evt) {
	_handle_error("There was an error attempting to upload the file." + evt);
	}

	function uploadCanceled(evt) {
	_handle_error("The upload has been canceled by the user or the browser dropped the connection.");
	}
	}
	var S3Tools = new S3ToolsClass();

	function uploadFile() {
	var file = document.getElementById('file').files[0];
	S3Tools.uploadFile(file, handleProgress, handleSuccess, handleError);
	}

	function handleProgress(percentComplete) {
	document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
	}

	function handleSuccess(fileName) {
	document.getElementById('progressNumber').innerHTML = 'Done!';
	document.getElementById('resultImage').setAttribute('src', 'https://' + bucketName + '.s3.amazonaws.com/avatar/' + fileName);
	}

	function handleError(message) {
	document.getElementById('progressNumber').innerHTML = 'Error: ' + message;
	}
	</script>
	</head>
	<body>
	<form id="form" enctype="multipart/form-data" method="post">
	<div class="row">
	1. Select a File<br>
	<input type="file" name="file" id="file"/>
	</div>
	<br>
	<div class="row">
	2. Upload File<br>
	<input type="button" onclick="uploadFile()" value="Upload" /><span id="progressNumber"></span>
	</div>
	</div>
	<br>
	<div class="row">
	3. Check result
	<br>
	<img id="resultImage" src=""></img>
	</div>
	</body>
	</html>