dominicpacquing/gist:6992910

## gistfile1.html
<html>
<head>
    <title>S3 POST Form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    function canAccessIFrame(iframe) {
        var html = null;
        try {
            // deal with older browsers
            var doc = iframe.contentDocument || iframe.contentWindow.document;
            html = doc.body.innerHTML;
        } catch(err){
            // do nothing
        }
        return(html !== null);
    }

    function iFrameLoaded() {
        // both error (https://bucket_name.s3.amazonaws.com/) and success (http://www.google.com)
        //   cases have a different domain which means that the iframe won't be accessible
        if (!canAccessIFrame($('#S3ResponseIFrame')[0])) {
            alert('upload finished');
            $('#loadedImg').error(function(){
                console.log(arguments)
                alert('upload failed');
            })
            $('#loadedImg').load(function(){
                alert('upload worked!!!!!!');
            })
            $('#loadedImg').attr('src','https://drop-images-aroundyou-dev.s3.amazonaws.com/image/' + _fileName);
        }
    }

    var _fileName = "";
    function getFileName(file) {
        _fileName = new Date().getTime() + '.' + file.split('.').pop();
        return _fileName;
    }

    function s3FormSubmit() {
        $('#s3Form')[0].key.value = 'image/' + getFileName($('#s3Form')[0].file.value);
        $('#s3Form').submit();
    }
</script>
<body>

<form id="s3Form" action="https://drop-images-aroundyou-dev.s3.amazonaws.com/" method="post" enctype="multipart/form-data" target="S3ResponseIFrame">
    <div style="margin:0;padding:0;display:inline">
        <input name="utf8" type="hidden" value="&#x2713;" /></div>
    <input id="key" name="key" type="hidden" value="" />
    <input id="acl" name="acl" type="hidden" value="public-read" />
    <input id="policy" name="policy" type="hidden" value="eyJleHBpcmF0aW9uIjoiMjAxMy0xMC0xNlQwMDoxMjo0MFoiLCJjb25kaXRpb25zIjpbWyJzdGFydHMtd2l0aCIsIiR1dGY4IiwiIl0sWyJzdGFydHMtd2l0aCIsIiRrZXkiLCIiXSxbImNvbnRlbnQtbGVuZ3RoLXJhbmdlIiwwLDEwNDg1NzZdLHsiYnVja2V0IjoiZHJvcC1pbWFnZXMtYXJvdW5keW91LWRldiJ9LHsiYWNsIjoicHVibGljLXJlYWQifSx7InN1Y2Nlc3NfYWN0aW9uX3N0YXR1cyI6IjIwMCJ9XX0=" /><input id="signature" name="signature" type="hidden" value="3K3odZ0d8Xw+66LdOnf8i8coZKo=" />
    <input id="AWSAccessKeyId" name="AWSAccessKeyId" type="hidden" value="AKIAIO3GPX5YG6PPE7BA" />
    <input id="success_action_status" name="success_action_status" type="hidden" value="200" />
    <!-- Include any additional input fields here -->
    File to upload to S3:
    <input name="file" type="file">
    <br>
    <input type="button" onclick="s3FormSubmit()" value="Upload File to S3">
</form>

<img id="loadedImg" src=""></img>

<iframe id="S3ResponseIFrame" onload="iFrameLoaded()"></iframe>

</body>
</html>
	<html>
	<head>
	<title>S3 POST Form</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</head>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script type="text/javascript">
	function canAccessIFrame(iframe) {
	var html = null;
	try {
	// deal with older browsers
	var doc = iframe.contentDocument \|\| iframe.contentWindow.document;
	html = doc.body.innerHTML;
	} catch(err){
	// do nothing
	}
	return(html !== null);
	}

	function iFrameLoaded() {
	// both error (https://bucket_name.s3.amazonaws.com/) and success (http://www.google.com)
	// cases have a different domain which means that the iframe won't be accessible
	if (!canAccessIFrame($('#S3ResponseIFrame')[0])) {
	alert('upload finished');
	$('#loadedImg').error(function(){
	console.log(arguments)
	alert('upload failed');
	})
	$('#loadedImg').load(function(){
	alert('upload worked!!!!!!');
	})
	$('#loadedImg').attr('src','https://drop-images-aroundyou-dev.s3.amazonaws.com/image/' + _fileName);
	}
	}

	var _fileName = "";
	function getFileName(file) {
	_fileName = new Date().getTime() + '.' + file.split('.').pop();
	return _fileName;
	}

	function s3FormSubmit() {
	$('#s3Form')[0].key.value = 'image/' + getFileName($('#s3Form')[0].file.value);
	$('#s3Form').submit();
	}
	</script>
	<body>

	<form id="s3Form" action="https://drop-images-aroundyou-dev.s3.amazonaws.com/" method="post" enctype="multipart/form-data" target="S3ResponseIFrame">
	<div style="margin:0;padding:0;display:inline">
	<input name="utf8" type="hidden" value="✓" /></div>
	<input id="key" name="key" type="hidden" value="" />
	<input id="acl" name="acl" type="hidden" value="public-read" />
	<input id="policy" name="policy" type="hidden" value="eyJleHBpcmF0aW9uIjoiMjAxMy0xMC0xNlQwMDoxMjo0MFoiLCJjb25kaXRpb25zIjpbWyJzdGFydHMtd2l0aCIsIiR1dGY4IiwiIl0sWyJzdGFydHMtd2l0aCIsIiRrZXkiLCIiXSxbImNvbnRlbnQtbGVuZ3RoLXJhbmdlIiwwLDEwNDg1NzZdLHsiYnVja2V0IjoiZHJvcC1pbWFnZXMtYXJvdW5keW91LWRldiJ9LHsiYWNsIjoicHVibGljLXJlYWQifSx7InN1Y2Nlc3NfYWN0aW9uX3N0YXR1cyI6IjIwMCJ9XX0=" /><input id="signature" name="signature" type="hidden" value="3K3odZ0d8Xw+66LdOnf8i8coZKo=" />
	<input id="AWSAccessKeyId" name="AWSAccessKeyId" type="hidden" value="AKIAIO3GPX5YG6PPE7BA" />
	<input id="success_action_status" name="success_action_status" type="hidden" value="200" />
	<!-- Include any additional input fields here -->
	File to upload to S3:
	<input name="file" type="file">
	<br>
	<input type="button" onclick="s3FormSubmit()" value="Upload File to S3">
	</form>

	<img id="loadedImg" src=""></img>

	<iframe id="S3ResponseIFrame" onload="iFrameLoaded()"></iframe>

	</body>
	</html>