Uploading dialog done

3 files changed, 34 insertions, 10 deletions

diff --git a/client/components/cards/attachments.jade b/client/components/cards/attachments.jade
index 04e0d04c..a5a5c00b 100644
--- a/client/components/cards/attachments.jade
+++ b/client/components/cards/attachments.jade
@@ -19,10 +19,10 @@ template(name="attachmentDeletePopup")
   button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
 
 template(name="uploadingPopup")
-  p Uploading...
-  p
-    span.upload-percentage 0%
-    div.upload-progress-bar
+  .uploading-info
+    span.upload-percentage {{progress}}%
+    .upload-progress-frame
+      .upload-progress-bar(style="width: {{progress}}%;")
     span.upload-size {{fileSize}}
 
 template(name="attachmentsGalery")
diff --git a/client/components/cards/attachments.js b/client/components/cards/attachments.js
index 026ce170..9e32825e 100644
--- a/client/components/cards/attachments.js
+++ b/client/components/cards/attachments.js
@@ -77,23 +77,24 @@ Template.cardAttachmentsPopup.events({
     const callbacks = {
 		    onBeforeUpload: (err, fileData) => {
           Popup.open('uploading')(this.clickEvent);
+          uploadFileSize.set('...');
+          uploadProgress.set(0);
           return true;
         },
         onUploaded: (err, attachment) => {
-          console.log('onEnd');
           if (attachment && attachment._id && attachment.isImage) {
             card.setCover(attachment._id);
           }
           Popup.close();
         },
         onStart: (error, fileData) => {
-          console.log('fd', fileData);
-          uploadFileSize.set(`${fileData.size} bytes`);
+          uploadFileSize.set(formatBytes(fileData.size));
         },
 				onError: (err, fileObj) => {
           console.log('Error!', err);
         },
         onProgress: (progress, fileData) => {
+          uploadProgress.set(progress);
         }
     };
     const processFile = f => {
@@ -144,12 +145,12 @@ Template.cardAttachmentsPopup.events({
   'click .js-upload-clipboard-image': Popup.open('previewClipboardImage'),
 });
 
-Template.uploadingPopup.onRendered(() => {
-});
-
 Template.uploadingPopup.helpers({
   fileSize: () => {
     return uploadFileSize.get();
+  },
+  progress: () => {
+    return uploadProgress.get();
   }
 });
 
@@ -225,3 +226,15 @@ Template.previewClipboardImagePopup.events({
     }
   },
 });
+
+function formatBytes(bytes, decimals = 2) {
+    if (bytes === 0) return '0 Bytes';
+
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
diff --git a/client/components/cards/attachments.styl b/client/components/cards/attachments.styl
index 4a22fd8a..61ea8232 100644
--- a/client/components/cards/attachments.styl
+++ b/client/components/cards/attachments.styl
@@ -64,6 +64,17 @@
   border: 1px solid black
   box-shadow: 0 1px 2px rgba(0,0,0,.2)
 
+.uploading-info
+  .upload-progress-frame
+    background-color: grey;
+    border: 1px solid;
+    height: 22px;
+
+  .upload-progress-bar
+    background-color: blue;
+    height: 20px;
+    padding: 1px;
+
 @media screen and (max-width: 800px)
   .attachments-galery
     flex-direction