Commit fea6789c by Johannes Zellner

Show upload progress per files

parent 74c0064c
Showing with 41 additions and 8 deletions
......@@ -85,6 +85,21 @@
</div>
</div>
<div class="container" v-show="uploadStatus.busy" v-cloak>
<div class="row">
<div class="col-lg-12">
<p>Uploading... ({{ uploadStatus.done }} / {{ uploadStatus.count }}) </p>
<center>
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" v-bind:style="{ width: uploadStatus.percentDone + '%' }">
<span class="sr-only">{{ uploadStatus.percentDone }}% Complete</span>
</div>
</div>
</center>
</div>
</div>
</div>
<div class="container" v-show="!session.valid && !busy" v-cloak>
<div class="row">
<div class="col-lg-6 col-lg-offset-3">
......@@ -106,7 +121,7 @@
<div class="container main" v-show="session.valid && !busy" v-cloak>
<div class="row">
<div class="col-lg-12">
<center>
<center v-show="!uploadStatus.busy">
<form id="fileUploadForm">
<input type="file" v-el:upload style="display: none" id="uploadInput" multiple/>
<button class="btn btn-primary" v-on:click.stop.prevent="upload()" id="uploadButton">Upload</button>
......
......@@ -124,13 +124,16 @@ function up() {
function upload() {
$(app.$els.upload).on('change', function () {
app.busy = true;
// detach event handler
$(app.$els.upload).off('change');
var length = app.$els.upload.files.length;
var done = 0;
app.uploadStatus = {
busy: true,
count: app.$els.upload.files.length,
done: 0,
percentDone: 0
};
function uploadFile(file) {
var path = encode(sanitize(app.path + '/' + file.name));
......@@ -143,16 +146,25 @@ function upload() {
if (result && result.statusCode !== 201) console.error('Error uploading file: ', result.statusCode);
if (error) console.error(error);
++done;
app.uploadStatus.done += 1;
app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.count * 100);
console.log(Math.round(app.uploadStatus.done / app.uploadStatus.count * 100))
if (app.uploadStatus.done >= app.uploadStatus.count) {
app.uploadStatus = {
busy: false,
count: 0,
done: 0,
percentDone: 100
};
if (done >= length) {
app.busy = false;
refresh();
}
});
}
for(var i = 0; i < length; i++) {
for(var i = 0; i < app.uploadStatus.count; ++i) {
uploadFile(app.$els.upload.files[i]);
}
});
......@@ -233,6 +245,12 @@ var app = new Vue({
el: '#app',
data: {
busy: true,
uploadStatus: {
busy: false,
count: 0,
done: 0,
percentDone: 50
},
path: '/',
pathParts: [],
session: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment