Show upload progress per files

diff --git a/frontend/index.html b/frontend/index.html
index 056f29cdf10ca0eb47347c577f5e0703bd138dfc..4c16ed5b503699d49b9f6042516338517e27ba6d 100644 (file)
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -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>

diff --git a/frontend/js/app.js b/frontend/js/app.js
index 9a2e532c5533e8eb5f9b40602923b3d8c37d9843..e0464f8191906afd0c57334f49461b9d93ad3ce8 100644 (file)
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -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: {