feature(client) directory: add abily to show progress dialog on upload

client/dom/directory.js

@@ -1,18 +1,17 @@
-/* global CloudCmd */
-
 'use strict';
 
+/* global CloudCmd */
+
 const philip = require('philip');
 
 const Images = require('./images');
 const {FS} = require('../../common/cloudfunc');
 const DOM = require('.');
+const Dialog = require('./dialog');
 
 const {getCurrentDirPath: getPathWhenRootEmpty} = DOM;
 
 module.exports = (items) => {
-    const {Dialog} = DOM;
-    
     if (items.length)
         Images.show('top');
     
@@ -24,6 +23,13 @@ module.exports = (items) => {
     const path = dirPath
         .replace(/\/$/, '');
     
+    const progress = Dialog.progress('Uploading...');
+    
+    progress.catch(() => {
+        Dialog.alert('Upload aborted');
+        uploader.abort();
+    });
+    
     const uploader = philip(entries, (type, name, data, i, n, callback) => {
         const {prefixURL} = CloudCmd;
         const full = prefixURL + FS + path + name;
@@ -47,7 +53,7 @@ module.exports = (items) => {
             const max = next - current;
             const value = current + percent(count, 100, max);
             
-            setProgress(value);
+            progress.setProgress(value);
         });
     });
     
@@ -56,7 +62,6 @@ module.exports = (items) => {
         uploader.abort();
     });
     
-    uploader.on('progress', setProgress);
     uploader.on('end', CloudCmd.refresh);
 };
 
@@ -64,12 +69,6 @@ function percent(i, n, per = 100) {
     return Math.round(i * per / n);
 }
 
-function setProgress(count) {
-    DOM.Images
-        .setProgress(count)
-        .show('top');
-}
-
 function uploadFile(url, data) {
     return DOM.load.put(url, data);
 }