generator-steroids
Version:
A Yeoman generator for Steroids
101 lines (74 loc) • 2.92 kB
HTML
<html>
<head>
<title>S3 Upload Example</title>
<link rel="stylesheet" href="vendor/topcoat/css/topcoat-mobile-light.css" />
<link rel="stylesheet" href="stylesheets/application.css" />
<!-- cordova.js is served from localhost to ensure the correct version -->
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script>
/*
This example is for demonstrational purposes only. It is highly recommended,
to upload to Amazon S3 using a server signed request.
You must create a bucket to Amazon S3, set up CORS rules:
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Also give access to 'everyone' with at least upload/delete permission to make this work.
*/
var bucket = ""; // configure your bucket name here
// just a reminder
if (bucket === "") {
alert("You must configure your bucket name (and permissions & CORS in AWS) first. Check out www/s3upload.html.");
};
var fileUrl = "",
url = "https://"+bucket+".s3.amazonaws.com/";
var onError = function() {
alert("File upload failed.");
document.querySelector("#status").innerHTML = "";
};
var onLoad = function() {
document.querySelector("img").setAttribute("src", fileUrl);
document.querySelector("#status").innerHTML = "Uploaded, showing picture from s3..";
};
var uploadToS3 = function() {
var file = document.querySelector("input#file").files[0];
// file.name on iOS is always 'image'.format, so add time prefix suffix
fileUrl = url+(new Date().getTime()+"_"+file.name);
// create the request
var xhr = new XMLHttpRequest()
xhr.open("PUT", fileUrl, true);
xhr.setRequestHeader("Content-type", "#{file.type}");
xhr.onload = onLoad;
xhr.onerror = onError;
xhr.send(file);
document.querySelector("#status").innerHTML = "Uploading..";
return false;
};
</script>
</head>
<body>
<div class="content-padded">
<form onsubmit="uploadToS3()">
<!-- Using label for='id' we can trigger file input action from other element -->
<label for="file">
<div class="topcoat-button--cta full center">Select file to upload</div>
</label>
<input type="file" id="file" style="display:none;" />
<p>
<div class="topcoat-button full center" ontouchend="uploadToS3()">Upload</div>
</p>
</form>
<div id="status"></div>
<img src="" />
</div>
</body>
</html>