From 5c17272a887a2b5ff4810c64c68a2bbc49825291 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 8 Oct 2018 15:15:52 +0200
Subject: Add upload progress to ui

Fixes #4
---
 frontend/index.html |  2 +-
 frontend/js/app.js  | 17 +++++++++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index bb53ca4..633de08 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -106,7 +106,7 @@
     </el-row>
     <el-row v-else>
       <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 :span="20">
         <el-progress :text-inside="true" :stroke-width="18" :percentage="uploadStatus.percentDone"></el-progress>
diff --git a/frontend/js/app.js b/frontend/js/app.js
index df5043a..2679187 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -132,23 +132,31 @@ function uploadFiles(files) {
 
     app.uploadStatus.busy = true;
     app.uploadStatus.count = files.length;
+    app.uploadStatus.size = 0;
     app.uploadStatus.done = 0;
     app.uploadStatus.percentDone = 0;
 
+    for (var i = 0; i < files.length; ++i) {
+        app.uploadStatus.size += files[i].size;
+    }
+
     asyncForEach(files, function (file, callback) {
         var path = encode(sanitize(app.path + '/' + (file.webkitRelativePath || file.name)));
 
         var formData = new FormData();
         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 !== 201) return callback('Error uploading file: ', result.statusCode);
             if (error) return callback(error);
 
-            app.uploadStatus.done += 1;
-            app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.count * 100);
-
             callback();
         });
     }, function (error) {
@@ -156,6 +164,7 @@ function uploadFiles(files) {
 
         app.uploadStatus.busy = false;
         app.uploadStatus.count = 0;
+        app.uploadStatus.size = 0;
         app.uploadStatus.done = 0;
         app.uploadStatus.percentDone = 100;
 
-- 
cgit v1.2.3