aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorJohannes Zellner <johannes@cloudron.io>2018-10-08 15:15:52 +0200
committerJohannes Zellner <johannes@cloudron.io>2018-10-08 15:15:54 +0200
commit5c17272a887a2b5ff4810c64c68a2bbc49825291 (patch)
tree323ecb587f2ea3c012e0aa02cec54d9e8b9eaf03
parentb3ff26fb1e2b4d07a1d7b00ee5ff6d72026c5427 (diff)
downloadSurfer-5c17272a887a2b5ff4810c64c68a2bbc49825291.tar.gz
Surfer-5c17272a887a2b5ff4810c64c68a2bbc49825291.tar.zst
Surfer-5c17272a887a2b5ff4810c64c68a2bbc49825291.zip
Add upload progress to ui
Fixes #4
-rw-r--r--frontend/index.html2
-rw-r--r--frontend/js/app.js17
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 @@
106 </el-row> 106 </el-row>
107 <el-row v-else> 107 <el-row v-else>
108 <el-col :span="4"> 108 <el-col :span="4">
109 Uploading files ({{ uploadStatus.done }} / {{ uploadStatus.count }}) 109 Uploading {{ uploadStatus.count }} files ({{ Math.round(uploadStatus.done/1000/1000) }}MB / {{ Math.round(uploadStatus.size/1000/1000) }}MB)
110 </el-col> 110 </el-col>
111 <el-col :span="20"> 111 <el-col :span="20">
112 <el-progress :text-inside="true" :stroke-width="18" :percentage="uploadStatus.percentDone"></el-progress> 112 <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) {
132 132
133 app.uploadStatus.busy = true; 133 app.uploadStatus.busy = true;
134 app.uploadStatus.count = files.length; 134 app.uploadStatus.count = files.length;
135 app.uploadStatus.size = 0;
135 app.uploadStatus.done = 0; 136 app.uploadStatus.done = 0;
136 app.uploadStatus.percentDone = 0; 137 app.uploadStatus.percentDone = 0;
137 138
139 for (var i = 0; i < files.length; ++i) {
140 app.uploadStatus.size += files[i].size;
141 }
142
138 asyncForEach(files, function (file, callback) { 143 asyncForEach(files, function (file, callback) {
139 var path = encode(sanitize(app.path + '/' + (file.webkitRelativePath || file.name))); 144 var path = encode(sanitize(app.path + '/' + (file.webkitRelativePath || file.name)));
140 145
141 var formData = new FormData(); 146 var formData = new FormData();
142 formData.append('file', file); 147 formData.append('file', file);
143 148
144 superagent.post('/api/files' + path).query({ access_token: localStorage.accessToken }).send(formData).end(function (error, result) { 149 superagent.post('/api/files' + path)
150 .query({ access_token: localStorage.accessToken })
151 .send(formData)
152 .on('progress', function (event) {
153 app.uploadStatus.done += event.loaded;
154 app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.size * 100);
155 }).end(function (error, result) {
145 if (result && result.statusCode === 401) return logout(); 156 if (result && result.statusCode === 401) return logout();
146 if (result && result.statusCode !== 201) return callback('Error uploading file: ', result.statusCode); 157 if (result && result.statusCode !== 201) return callback('Error uploading file: ', result.statusCode);
147 if (error) return callback(error); 158 if (error) return callback(error);
148 159
149 app.uploadStatus.done += 1;
150 app.uploadStatus.percentDone = Math.round(app.uploadStatus.done / app.uploadStatus.count * 100);
151
152 callback(); 160 callback();
153 }); 161 });
154 }, function (error) { 162 }, function (error) {
@@ -156,6 +164,7 @@ function uploadFiles(files) {
156 164
157 app.uploadStatus.busy = false; 165 app.uploadStatus.busy = false;
158 app.uploadStatus.count = 0; 166 app.uploadStatus.count = 0;
167 app.uploadStatus.size = 0;
159 app.uploadStatus.done = 0; 168 app.uploadStatus.done = 0;
160 app.uploadStatus.percentDone = 100; 169 app.uploadStatus.percentDone = 100;
161 170