Skip to content

Instantly share code, notes, and snippets.

@stcrestrada

stcrestrada/gist:5adee8f2a90829e931bd

Created April 7, 2015 20:27
Show Gist options
  • Save stcrestrada/5adee8f2a90829e931bd to your computer and use it in GitHub Desktop.
Save stcrestrada/5adee8f2a90829e931bd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<title>YO</title>
<script src="//sdk.amazonaws.com/js/aws-sdk-2.1.21.min.js"></script>
<script src="//zeptojs.com/zepto.min.js"></script>
<script src="//cdn.jsdelivr.net/cookies.js/1.2.1/cookies.min.js"></script>
<link rel="stylesheet" href="//yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<div class="container">
<div id="content-default" class='content-block'>
<h4><a id="reg-button" class="pager pure-button pure-button-primary" data-page-to="content-registration" href="#">Register</a></h4>
<h4><a id="log-button" class='pager pure-button pure-button-primary' data-page-to="content-login" href="#">Login</a></h4>
</div>
<div id="content-registration" class='content-block'>
<form class="pure-form" id="register-form" data-type="register" action="http://127.0.0.1:8000/api/register/" method="POST">
<p class="error-holder alert alert-danger" role="alert"></p>
<input id="id_email" name="email" type="email" placeholder="Enter Email"><br><br>
<input id="id_password_one" name="password1" type="password" placeholder="Enter password"><br><br>
<input id="id_password_two" name="password2" type="password" placeholder="Enter again"><br><br>
<div class="btn-group">
<input class="pure-button pure-button-primary" type="submit" value="Register">
<button type="button" class='pager pure-button' data-page-to="content-default">Close</button>
</div>
</form>
</div>
<div id="content-login" class='content-block'>
<form class="pure-form" id="login-form" data-type="login" action="http://127.0.0.1:8000/api/login/" method="POST">
<p class="error-holder"></p>
<input id="id_email" name="email" type="text" placeholder="Enter Email"><br><br>
<input id="id_password" name="password" type="password" placeholder="Enter password"><br><br>
<div class="btn-group">
<input class="pure-button pure-button-primary" type="submit" value="Login">
<button type="button" class="pager pure-button " data-page-to="content-default">Close</button>
</div>
</form>
</div>
<div id="content-upload" class='content-block'>
<p id="upload-error" class="error-holder"></p>
<h1 id='brand' data-brand-name="apple">Upload Image</h1>
<img id="icon" class="pure-img" src="https://lh6.ggpht.com/CMKI0lHRdX6Vcuk8lLS-4B9D2CSUUfDxlXjWBrn3F9y8Re33kNhU2Fr_vdcLxpH8Zw=w300"><br><br>
<form id="upload-form">
<input type="file" id="file-chooser"/><br><br>
</form>
<button class="pure-button pure-button-primary" id="upload-button">Upload to S3</button><br>
<div id="results"></div>
</div>
</div>
<style type="text/css">
#icon {
width: 100px;
height: 100px;
}
#log-button{
width:95px;
}
.button-success {
background: rgb(28, 184, 65); /* this is a green */
}
.button-error {
background: rgb(202, 60, 60); /* this is a maroon */
}
.button-secondary {
background: rgb(66, 184, 221); /* this is a light blue */
}
.button-warning {
background: rgb(223, 117, 20); /* this is an orange */
}
.button-success,
.button-error,
.button-warning,
.button-secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.container{
width:100%;
height:100%;
margin-left:5%;
}
</style>
<script type="text/javascript">
/*AWS global unique identifier*/
var guid = (function () {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
}
return function () {
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
};
})();
var CookieName = 'scooper';
var TOKEN = null;
function setToken(){
TOKEN = Cookies.get(CookieName);
}
setToken();
/*AWS sdk configuration to upload to s3*/
AWS.config.update({accessKeyId: 'AKIAJ36C7S7OYWK4JLWQ', secretAccessKey: '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'});
var bucket = new AWS.S3({params: {Bucket: 'photowidget'}});
var fileChooser = document.getElementById('file-chooser');
var button = document.getElementById('upload-button');
var results = document.getElementById('results');
button.addEventListener('click', function () {
var file = fileChooser.files[0];
if (file) {
results.innerHTML = '';
gen_guid = guid();
var params = {Key: gen_guid, ContentType: file.type, Body: file, Metadata: {OriginalFileName: file.name}};
bucket.putObject(params, function (err, data) {
$.ajax({
type: 'POST',
url: "http://127.0.0.1:8000/api/upload/",
/* data to be added to query string:*/
data: {
"guid": gen_guid,
"file_name": file.name,
"location": window.document.location.href,
"token": TOKEN
},
/*type of data we are expecting in return:*/
dataType: 'json',
success: function (data) {
$('#upload-error').show().text("SUCCESS!");
$(fileChooser).replaceWith($(fileChooser).clone());
},
error: function (xhr, type) {
var resp = JSON.parse(xhr.responseText);
if (resp["error"] == "login") {
hideBlocks();
$contentLogin.show();
}
else {
$('#upload-error').show().text(resp["error"]);
}
}
});
});
} else {
results.innerHTML = 'Nothing to upload.';
}
}, false);
$contentBlocks = $('.content-block');
$contentDefault = $('#content-default');
$contentRegistration = $('#content-registration');
$contentLogin = $('#content-login');
$contentUpload = $('#content-upload');
function hideBlocks() {
$contentBlocks.hide();
}
function loadHome() {
hideBlocks();
if (TOKEN){
$contentUpload.show();
}
else{
$contentDefault.show()
}
}
$(document).ready(function () {
loadHome();
$('.pager').click(function () {
$this = $(this);
var show = $this.data('page-to');
hideBlocks();
$('#' + show).show();
});
$('form').submit(function (e) {
$('error-holder').hide();
$form = $(this);
$.ajax({
type: 'POST',
url: $form.attr('action'),
/* data to be added to query string:*/
data: $form.serialize(),
/*type of data we are expecting in return:*/
dataType: 'json',
success: function (data) {
var type = $form.data('type');
if (type == "register") {
hideBlocks();
$contentLogin.show();
}
else if (type == "login") {
hideBlocks();
Cookies.set(CookieName, data["token"], {expires: 60*30});
setToken();
$contentUpload.show();
}
},
error: function (xhr, type) {
var resp = JSON.parse(xhr.responseText);
$form.find('.error-holder').text(resp['error']);
}
});
e.preventDefault();
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment