<div class="container">
<h1>Print Labels on Brady IP Printer</h1>
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Select .xls file...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="src_file">
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress">
<div class="progress-bar progress-bar-success"></div>
</div>
<!-- The container for the uploaded files -->
<div id="outcome" class="result"></div>
<br>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Notes</h3>
</div>
<div class="panel-body">
<ul>
<li>Only xls files (97-2003) are allowed, xlsx (2007-2013)
not supported</li>
<li>You can <strong>drag & drop</strong> files onto this webpage
</li>
<!--
<li>Built with <a href="http://getbootstrap.com/">Bootstrap</a>
and Icons from <a href="http://glyphicons.com/">Glyphicons</a>
</li>
-->
</ul>
</div>
</div>
</div>
<script>
/*jslint unparam: true */
/*global window, $ */
$(function () {
'use strict';
// Change this to the location of your server-side upload handler:
var url = '[% request.uri_base %]/labels';
$('#fileupload').fileupload({
url: url,
dataType: 'json',
done: function (e, data) {
$.each(data.result.labels, function (index, label) {
$('<div/>').text(label).appendTo('#outcome');
});
},
progressall: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
}
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>