chrisallick/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <!-- Contentful dependencies -->
        <link rel="stylesheet" href="https://contentful.github.io/ui-extensions-sdk/cf-extension.css">
        <script src="https://unpkg.com/contentful-ui-extensions-sdk@3"></script>

        <!-- AWS JS SDK -->
        <script src="https://sdk.amazonaws.com/js/aws-sdk-2.120.0.min.js"></script>

        <!-- Chris Cannot Code -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <!-- AWS S3 Congifuration and a helper function -->
        <script>
            /*
                config amazon s3
            */
            var albumBucketName = '_snip_';
            var bucketRegion = '_snip_';
            var IdentityPoolId = '_snip_';

            AWS.config.update({
                region: bucketRegion,
                credentials: new AWS.CognitoIdentityCredentials({
                    IdentityPoolId: IdentityPoolId
                })
            });

            var s3 = new AWS.S3({
                apiVersion: '2006-03-01',
                params: {Bucket: albumBucketName}
            });

            /*
                Generate UUID
            */
            function makeuuid() {
                var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                    var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
                    return v.toString(16);
                });

                return uuid;
            }
        </script>

        <!-- Custom Styles -->
        <style>
            #thumbnail { display: none; }
        </style>
    </head>
    <body>
        <div class="cf-form-field" >
            <p>S3 Url:</p>
            <p id="s3url">select file to upload...</p>
            <input type="file" class="cf-form-file-input" id="s3-file-input">
            <img id="thumbnail" width="100px" src="" />
        </div>

        <script>
            window.contentfulExtension.init(function(api) {
                //api is the object giving us access to the Contentful API.

                //First, let's adjust the height of the iframe we are in, so it fits with what we need.
                //We could call api.window.startAutoResizer() but in this case I prefer to set a specific height:
                api.window.updateHeight(200);

                console.log( api.parameters );

                if( api.field.getValue() != undefined ) {
                    $("#s3url").text( api.field.getValue() );
                    $("#thumbnail").attr("src", api.field.getValue() ).css({
                        "display": "block"
                    });
                }

                //Also, what if something or someone else changed this value while we were editing it?
                //Better listen for that as well:
                api.field.onValueChanged(function(value) {
                    if (value !== $("#s3url").text()) {
                        $("#s3url").text( api.field.getValue() );
                        $("#thumbnail").attr("src", api.field.getValue() ).css({
                            "display": "block"
                        });
                    }
                });

                //Let's get the input field from the DOM:
                var fileInputField = document.getElementById('s3-file-input');

                //We should set up an event listener for when it changes, so we can send the new value to Contentful:
                fileInputField.addEventListener('change',function() {
                    $("#s3url").text("uploading...");

                    var new_submission = {};
                    new_submission.uuid = makeuuid();
                    new_submission.photo = "https://_snip_.s3.amazonaws.com/"+new_submission.uuid+".jpeg";

                    var photo = fileInputField.files[0];

                    s3.upload({
                        Key: new_submission.uuid + ".jpeg",
                        Body: photo,
                        ContentType: 'image/jpeg',
                        ACL: 'public-read'
                    }, function(err, data) {
                        if (err) {
                            return console.log('There was an error uploading your photo: ', err.message);
                        }
                        console.log('Successfully uploaded photo.');

                        $("#s3url").text(new_submission.photo);
                        api.field.setValue(new_submission.photo);

                        $("#s3-file-input").css({
                            "display": "none"
                        })

                        $("#thumbnail").attr("src", new_submission.photo).css({
                            "display": "block"
                        });
                    });
                });
            });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<!-- Contentful dependencies -->
	<link rel="stylesheet" href="https://contentful.github.io/ui-extensions-sdk/cf-extension.css">
	<script src="https://unpkg.com/contentful-ui-extensions-sdk@3"></script>

	<!-- AWS JS SDK -->
	<script src="https://sdk.amazonaws.com/js/aws-sdk-2.120.0.min.js"></script>

	<!-- Chris Cannot Code -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	<!-- AWS S3 Congifuration and a helper function -->
	<script>
	/*
	config amazon s3
	*/
	var albumBucketName = '_snip_';
	var bucketRegion = '_snip_';
	var IdentityPoolId = '_snip_';

	AWS.config.update({
	region: bucketRegion,
	credentials: new AWS.CognitoIdentityCredentials({
	IdentityPoolId: IdentityPoolId
	})
	});

	var s3 = new AWS.S3({
	apiVersion: '2006-03-01',
	params: {Bucket: albumBucketName}
	});

	/*
	Generate UUID
	*/
	function makeuuid() {
	var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
	var r = Math.random()*16\|0, v = c == 'x' ? r : (r&0x3\|0x8);
	return v.toString(16);
	});

	return uuid;
	}
	</script>

	<!-- Custom Styles -->
	<style>
	#thumbnail { display: none; }
	</style>
	</head>
	<body>
	<div class="cf-form-field" >
	<p>S3 Url:</p>
	<p id="s3url">select file to upload...</p>
	<input type="file" class="cf-form-file-input" id="s3-file-input">
	<img id="thumbnail" width="100px" src="" />
	</div>

	<script>
	window.contentfulExtension.init(function(api) {
	//api is the object giving us access to the Contentful API.

	//First, let's adjust the height of the iframe we are in, so it fits with what we need.
	//We could call api.window.startAutoResizer() but in this case I prefer to set a specific height:
	api.window.updateHeight(200);

	console.log( api.parameters );

	if( api.field.getValue() != undefined ) {
	$("#s3url").text( api.field.getValue() );
	$("#thumbnail").attr("src", api.field.getValue() ).css({
	"display": "block"
	});
	}

	//Also, what if something or someone else changed this value while we were editing it?
	//Better listen for that as well:
	api.field.onValueChanged(function(value) {
	if (value !== $("#s3url").text()) {
	$("#s3url").text( api.field.getValue() );
	$("#thumbnail").attr("src", api.field.getValue() ).css({
	"display": "block"
	});
	}
	});

	//Let's get the input field from the DOM:
	var fileInputField = document.getElementById('s3-file-input');

	//We should set up an event listener for when it changes, so we can send the new value to Contentful:
	fileInputField.addEventListener('change',function() {
	$("#s3url").text("uploading...");

	var new_submission = {};
	new_submission.uuid = makeuuid();
	new_submission.photo = "https://_snip_.s3.amazonaws.com/"+new_submission.uuid+".jpeg";

	var photo = fileInputField.files[0];

	s3.upload({
	Key: new_submission.uuid + ".jpeg",
	Body: photo,
	ContentType: 'image/jpeg',
	ACL: 'public-read'
	}, function(err, data) {
	if (err) {
	return console.log('There was an error uploading your photo: ', err.message);
	}
	console.log('Successfully uploaded photo.');

	$("#s3url").text(new_submission.photo);
	api.field.setValue(new_submission.photo);

	$("#s3-file-input").css({
	"display": "none"
	})

	$("#thumbnail").attr("src", new_submission.photo).css({
	"display": "block"
	});
	});
	});
	});
	</script>
	</body>
	</html>