Attachment, simple upload progress bar

client/components/cards/attachments.css

@@ -1,3 +1,7 @@
+.attachment-upload {
+  text-align: center;
+  font-weight: bold;
+}
 .attachments-galery {
   display: flex;
   flex-wrap: wrap;

client/components/cards/attachments.jade

@@ -1,10 +1,24 @@
 template(name="cardAttachmentsPopup")
-  ul.pop-over-list
-    li
-      input.js-attach-file.hide(type="file" name="file" multiple)
-      a.js-computer-upload {{_ 'computer'}}
-    li
-      a.js-upload-clipboard-image {{_ 'clipboard'}}
+  with currentUpload
+    .attachment-upload {{_ 'uploading'}}
+      table
+        tr
+          th.upload-file-name-descr {{_ 'name'}}
+          th.upload-progress-descr {{_ 'progress'}}
+          th.upload-remaining-descr {{_ 'remaining_time'}}
+          th.upload-speed-descr {{_ 'speed'}}
+        tr
+          td.upload-file-name-value {{file.name}}
+          td.upload-progress-value {{progress.get}}%
+          td.upload-remaining-value {{getEstimateTime}}
+          td.upload-speed-value {{getEstimateSpeed}}
+  else
+    ul.pop-over-list
+      li
+        input.js-attach-file.hide(type="file" name="file" multiple)
+        a.js-computer-upload {{_ 'computer'}}
+      li
+        a.js-upload-clipboard-image {{_ 'clipboard'}}
 
 template(name="previewClipboardImagePopup")
   p <kbd>Ctrl</kbd>+<kbd>V</kbd> {{_ "paste-or-dragdrop"}}
@@ -37,8 +51,6 @@ template(name="attachmentsGalery")
                   source(src="{{link}}" type="video/mp4")
             else
               span.attachment-thumbnail-ext= extension
-          else
-            +spinner
         p.attachment-details
           = name
           span.file-size ({{fileSize size}} KB)

client/components/cards/attachments.js

@@ -1,3 +1,6 @@
+const filesize = require('filesize');
+const prettyMilliseconds = require('pretty-ms');
+
 Template.attachmentsGalery.events({
   'click .js-add-attachment': Popup.open('cardAttachments'),
   // If we let this event bubble, FlowRouter will handle it and empty the page
@@ -17,8 +20,26 @@ Template.attachmentsGalery.helpers({
   },
 });
 
+Template.cardAttachmentsPopup.onCreated(function() {
+  this.currentUpload = new ReactiveVar(false);
+});
+
+Template.cardAttachmentsPopup.helpers({
+  getEstimateTime() {
+    const ret = prettyMilliseconds(Template.instance().currentUpload.get().estimateTime.get());
+    return ret;
+  },
+  getEstimateSpeed() {
+    const ret = filesize(Template.instance().currentUpload.get().estimateSpeed.get(), {round: 0}) + "/s";
+    return ret;
+  },
+  currentUpload() {
+    return Template.instance().currentUpload.get();
+  }
+});
+
 Template.cardAttachmentsPopup.events({
-  'change .js-attach-file'(event) {
+  'change .js-attach-file'(event, templateInstance) {
     const card = this;
     const files = event.currentTarget.files;
     if (files) {
@@ -36,6 +57,9 @@ Template.cardAttachmentsPopup.events({
           config,
           false,
         );
+        uploader.on('start', function() {
+          templateInstance.currentUpload.set(this);
+        });
         uploader.on('uploaded', (error, fileRef) => {
           if (!error) {
             if (fileRef.isImage) {
@@ -44,7 +68,11 @@ Template.cardAttachmentsPopup.events({
           }
         });
         uploader.on('end', (error, fileRef) => {
-          Popup.back();
+          templateInstance.currentUpload.set(false);
+          finished.push(fileRef);
+          if (finished.length == files.length) {
+            Popup.back();
+          }
         });
         uploader.start();
       }