<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 file...</span>
<!-- The file input field used as target for the file upload widget -->
<input id="fileupload" type="file" name="src_file" multiple>
</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="files" class="files"></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 are allowed (xlsx not yet supported)</li>
<li>You can <strong>drag & drop</strong> files from your desktop on 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.files, function (index, file) {
$('<p/>').text(file.name).appendTo('#files');
});
},
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>