From d0803a0432f50d6d32b498d50f37f4325984e85c Mon Sep 17 00:00:00 2001 From: Johannes Zellner Date: Thu, 17 May 2018 14:59:45 +0200 Subject: Show upload progress --- frontend/css/style.css | 2 +- frontend/index.html | 62 +++++++++++++++++++++++--------------------------- frontend/js/app.js | 57 +++++++++++++++++++++++++++------------------- 3 files changed, 64 insertions(+), 57 deletions(-) (limited to 'frontend') diff --git a/frontend/css/style.css b/frontend/css/style.css index 5c9236b..45fce56 100644 --- a/frontend/css/style.css +++ b/frontend/css/style.css @@ -23,7 +23,7 @@ body { .el-footer { padding: 3px 20px; font-size: 14px; - text-align: center; + height: 38px !important; } a { diff --git a/frontend/index.html b/frontend/index.html index 2e2e5e3..15e5d98 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -70,47 +70,43 @@ - -

- - - - - - - - - - - +
+ + + + + + + + + + + +
- Built by the Cloudron.io team. Get the code + + + + Uploading files ({{ uploadStatus.done }} / {{ uploadStatus.count }}) + + + + + + diff --git a/frontend/js/app.js b/frontend/js/app.js index d659b18..1500457 100644 --- a/frontend/js/app.js +++ b/frontend/js/app.js @@ -1,6 +1,23 @@ (function () { 'use strict'; +// poor man's async +function asyncForEach(items, handler, callback) { + var cur = 0; + + if (items.length === 0) return callback(); + + (function iterator() { + handler(items[cur], function (error) { + if (error) return callback(error); + if (cur >= items.length-1) return callback(); + ++cur; + + iterator(); + }); + })(); +} + function getProfile(accessToken, callback) { callback = callback || function (error) { if (error) console.error(error); }; @@ -114,14 +131,12 @@ function up() { function uploadFiles(files) { if (!files || !files.length) return; - app.uploadStatus = { - busy: true, - count: files.length, - done: 0, - percentDone: 0 - }; + app.uploadStatus.busy = true; + app.uploadStatus.count = files.length; + app.uploadStatus.done = 0; + app.uploadStatus.percentDone = 0; - function uploadFile(file) { + asyncForEach(files, function (file, callback) { var path = encode(sanitize(app.path + '/' + file.name)); var formData = new FormData(); @@ -129,28 +144,24 @@ function uploadFiles(files) { superagent.post('/api/files' + path).query({ access_token: localStorage.accessToken }).send(formData).end(function (error, result) { if (result && result.statusCode === 401) return logout(); - if (result && result.statusCode !== 201) console.error('Error uploading file: ', result.statusCode); - if (error) console.error(error); + 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); - if (app.uploadStatus.done >= app.uploadStatus.count) { - app.uploadStatus = { - busy: false, - count: 0, - done: 0, - percentDone: 100 - }; - - refresh(); - } + callback(); }); - } + }, function (error) { + if (error) console.error(error); - for(var i = 0; i < app.uploadStatus.count; ++i) { - uploadFile(files[i]); - } + app.uploadStatus.busy = false; + app.uploadStatus.count = 0; + app.uploadStatus.done = 0; + app.uploadStatus.percentDone = 100; + + refresh(); + }); } function dragOver(event) { -- cgit v1.2.3