Uploading dialog done

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")

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];
+}

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