formstone
Version:
Library of modular front end components.
339 lines (299 loc) • 14.3 kB
HTML
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<!-- Page Attributes -->
<title>Upload · Formstone</title>
<!-- Modernizer -->
<script src="../js/modernizr.js?v=1.4.7"></script>
<!-- Compiled CSS -->
<link rel="stylesheet" href="../css/site.css?v=1.4.7">
<!-- Compiled JS -->
<script src="../js/site.js?v=1.4.7"></script>
<!-- <script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script> -->
</head>
<body class="fs-grid demo_page">
<!-- JSHEADER -->
<div class="demo_content">
<header class="header">
<div class="fs-row">
<div class="fs-cell"> <a href="https://formstone.it/" class="header_logo icon-logo">Formstone</a> </div>
</div>
</header>
<div class="fs-row">
<div class="fs-cell">
<h1 id="upload-demo">Upload Demo</h1>
<p class="back_link"><a href="https://formstone.it/components/upload">View Documentation</a></p>
<!-- START: DEMO -->
<h4>Basic</h4>
<!-- START: FIRSTDEMO -->
<style>
.filelists {
margin: 20px 0;
}
.filelists h5 {
margin: 10px 0 0;
}
.filelists .cancel_all {
color: red;
cursor: pointer;
clear: both;
font-size: 10px;
margin: 0;
text-transform: uppercase;
}
.filelist {
margin: 0;
padding: 10px 0;
}
.filelist li {
background: #fff;
border-bottom: 1px solid #ECEFF1;
font-size: 14px;
list-style: none;
padding: 5px;
position: relative;
}
.filelist li:before {
display: none ;
}
/* main site demos */
.filelist li .bar {
background: #eceff1;
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 0;
z-index: 0;
-webkit-transition: width 0.1s linear;
transition: width 0.1s linear;
}
.filelist li .content {
display: block;
overflow: hidden;
position: relative;
z-index: 1;
}
.filelist li .file {
color: #455A64;
float: left;
display: block;
overflow: hidden;
text-overflow: ellipsis;
max-width: 50%;
white-space: nowrap;
}
.filelist li .progress {
color: #B0BEC5;
display: block;
float: right;
font-size: 10px;
text-transform: uppercase;
}
.filelist li .cancel {
color: red;
cursor: pointer;
display: block;
float: right;
font-size: 10px;
margin: 0 0 0 10px;
text-transform: uppercase;
}
.filelist li.error .file {
color: red;
}
.filelist li.error .progress {
color: red;
}
.filelist li.error .cancel {
display: none;
}
</style>
<script>
Formstone.Ready(function() {
$(".upload").upload({
maxSize: 1073741824,
beforeSend: onBeforeSend
}).on("start.upload", onStart)
.on("complete.upload", onComplete)
.on("filestart.upload", onFileStart)
.on("fileprogress.upload", onFileProgress)
.on("filecomplete.upload", onFileComplete)
.on("fileerror.upload", onFileError)
.on("chunkstart.upload", onChunkStart)
.on("chunkprogress.upload", onChunkProgress)
.on("chunkcomplete.upload", onChunkComplete)
.on("chunkerror.upload", onChunkError)
.on("queued.upload", onQueued);
$(".filelist.queue").on("click", ".cancel", onCancel);
$(".cancel_all").on("click", onCancelAll);
});
function onCancel(e) {
console.log("Cancel");
var index = $(this).parents("li").data("index");
$(this).parents("form").find(".upload").upload("abort", parseInt(index, 10));
}
function onCancelAll(e) {
console.log("Cancel All");
$(this).parents("form").find(".upload").upload("abort");
}
function onBeforeSend(formData, file) {
console.log("Before Send");
formData.append("test_field", "test_value");
// return (file.name.indexOf(".jpg") < -1) ? false : formData; // cancel all jpgs
return formData;
}
function onQueued(e, files) {
console.log("Queued");
var html = '';
for (var i = 0; i < files.length; i++) {
html += '<li data-index="' + files[i].index + '"><span class="content"><span class="file">' + files[i].name + '</span><span class="cancel">Cancel</span><span class="progress">Queued</span></span><span class="bar"></span></li>';
}
$(this).parents("form").find(".filelist.queue")
.append(html);
}
function onStart(e, files) {
console.log("Start");
$(this).parents("form").find(".filelist.queue")
.find("li")
.find(".progress").text("Waiting");
}
function onComplete(e) {
console.log("Complete");
// All done!
}
function onFileStart(e, file) {
console.log("File Start");
$(this).parents("form").find(".filelist.queue")
.find("li[data-index=" + file.index + "]")
.find(".progress").text("0%");
}
function onFileProgress(e, file, percent) {
console.log("File Progress");
var $file = $(this).parents("form").find(".filelist.queue").find("li[data-index=" + file.index + "]");
$file.find(".progress").text(percent + "%")
$file.find(".bar").css("width", percent + "%");
}
function onFileComplete(e, file, response) {
console.log("File Complete");
if (response.trim() === "" || response.toLowerCase().indexOf("error") > -1) {
$(this).parents("form").find(".filelist.queue")
.find("li[data-index=" + file.index + "]").addClass("error")
.find(".progress").text(response.trim());
} else {
var $target = $(this).parents("form").find(".filelist.queue").find("li[data-index=" + file.index + "]");
$target.find(".file").text(file.name);
$target.find(".progress").remove();
$target.find(".cancel").remove();
$target.appendTo($(this).parents("form").find(".filelist.complete"));
}
}
function onFileError(e, file, error) {
console.log("File Error");
$(this).parents("form").find(".filelist.queue")
.find("li[data-index=" + file.index + "]").addClass("error")
.find(".progress").text("Error: " + error);
}
function onChunkStart(e, file) {
console.log("Chunk Start");
}
function onChunkProgress(e, file, percent) {
console.log("Chunk Progress");
}
function onChunkComplete(e, file, response) {
console.log("Chunk Complete");
}
function onChunkError(e, file, error) {
console.log("Chunk Error");
}
</script>
<div class="demo_container">
<div class="demo_example">
<form action="#" method="GET" class="form demo_form">
<div class="upload" data-upload-options='{"action":"../_extra/upload-target.php"}'></div>
<div class="filelists">
<h5>Complete</h5>
<ol class="filelist complete">
</ol>
<h5>Queued</h5>
<ol class="filelist queue">
</ol>
<span class="cancel_all">Cancel All</span>
</div>
</form>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="upload"></div></code></pre>
<pre><code class="language-javascript">$(".upload").upload({
action: "//example.com/handle-upload.php"
});</code></pre>
</div>
</div>
<!-- END: FIRSTDEMO -->
<h4>Chunked Uploads</h4>
<div class="demo_container">
<div class="demo_example">
<form action="#" method="GET" class="form demo_form">
<div class="upload" data-upload-options='{"action":"../_extra/upload-chunked.php","chunked":true}'></div>
<div class="filelists">
<h5>Complete</h5>
<ol class="filelist complete">
</ol>
<h5>Queued</h5>
<ol class="filelist queue">
</ol>
<span class="cancel_all">Cancel All</span>
</div>
</form>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="upload"></div></code></pre>
<pre><code class="language-javascript">$(".upload").upload({
action: "//example.com/handle-chunked-upload.php",
chunked: true
});</code></pre>
</div>
</div>
<h4>No Theme</h4>
<div class="demo_container">
<div class="demo_example">
<form action="#" method="GET" class="form demo_form">
<div class="upload" data-upload-options='{"action":"../_extra/upload-target.php","theme":""}'></div>
<div class="filelists">
<h5>Complete</h5>
<ol class="filelist complete">
</ol>
<h5>Queued</h5>
<ol class="filelist queue">
</ol>
<span class="cancel_all">Cancel All</span>
</div>
</form>
</div>
<div class="demo_code">
<pre><code class="language-html"><div class="upload"></div></code></pre>
<pre><code class="language-javascript">$(".upload").upload({
action: "//example.com/handle-upload.php",
theme: ""
});</code></pre>
</div>
</div>
<!-- END: DEMO -->
<div class="footer">
<div class="copyright">
<div>© 2018 <a href="https://formstone.it/">Formstone</a></div>
</div>
<div class="footer_links">
<!-- JSFOOTER -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>