Add upload progress to ui

Fixes #4

frontend/index.html

@@ -106,7 +106,7 @@
     </el-row>
     </el-row>
     <el-row v-else>
     <el-row v-else>
       <el-col :span="4">
       <el-col :span="4">
-        Uploading files ({{ uploadStatus.done }} / {{ uploadStatus.count }})
+        Uploading {{ uploadStatus.count }} files ({{ Math.round(uploadStatus.done/1000/1000) }}MB / {{ Math.round(uploadStatus.size/1000/1000) }}MB)
       </el-col>
       </el-col>
       <el-col :span="20">
       <el-col :span="20">
         <el-progress :text-inside="true" :stroke-width="18" :percentage="uploadStatus.percentDone"></el-progress>
         <el-progress :text-inside="true" :stroke-width="18" :percentage="uploadStatus.percentDone"></el-progress>

frontend/js/app.js

@@ -132,23 +132,31 @@ function uploadFiles(files) {
 
 
     app.uploadStatus.busy = true;
     app.uploadStatus.busy = true;
     app.uploadStatus.count = files.length;
     app.uploadStatus.count = files.length;
+    app.uploadStatus.size = 0;
     app.uploadStatus.done = 0;
     app.uploadStatus.done = 0;
     app.uploadStatus.percentDone = 0;
     app.uploadStatus.percentDone = 0;
 
 
+    for (var i = 0; i < files.length; ++i) {
+        app.uploadStatus.size += files[i].size;
+    }
+
     asyncForEach(files, function (file, callback) {
     asyncForEach(files, function (file, callback) {
         var path = encode(sanitize(app.path + '/' + (file.webkitRelativePath || file.name)));
         var path = encode(sanitize(app.path + '/' + (file.webkitRelativePath || file.name)));
 
 
         var formData = new FormData();
         var formData = new FormData();
         formData.append('file', file);
         formData.append('file', file);
 
 
-        superagent.post('/api/files' + path).query({ access_token: localStorage.accessToken }).send(formData).end(function (error, result) {
+        superagent.post('/api/files' + path)
+          .query({ access_token: localStorage.accessToken })
+          .send(formData)
+          .on('progress', function (event) {
+            app.uploadStatus.done += event.loaded;
+            app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.size * 100);
+        }).end(function (error, result) {
             if (result && result.statusCode === 401) return logout();
             if (result && result.statusCode === 401) return logout();
             if (result && result.statusCode !== 201) return callback('Error uploading file: ', result.statusCode);
             if (result && result.statusCode !== 201) return callback('Error uploading file: ', result.statusCode);
             if (error) return callback(error);
             if (error) return callback(error);
 
 
-            app.uploadStatus.done += 1;
-            app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.count * 100);
-
             callback();
             callback();
         });
         });
     }, function (error) {
     }, function (error) {
@@ -156,6 +164,7 @@ function uploadFiles(files) {
 
 
         app.uploadStatus.busy = false;
         app.uploadStatus.busy = false;
         app.uploadStatus.count = 0;
         app.uploadStatus.count = 0;
+        app.uploadStatus.size = 0;
         app.uploadStatus.done = 0;
         app.uploadStatus.done = 0;
         app.uploadStatus.percentDone = 100;
         app.uploadStatus.percentDone = 100;