Change upload routine, add upload popup

client/components/cards/attachments.jade

@@ -18,6 +18,13 @@ template(name="attachmentDeletePopup")
   p {{_ "attachment-delete-pop"}}
   button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
 
+template(name="uploadingPopup")
+  p Uploading...
+  p
+    span.upload-percentage 0%
+    div.upload-progress-bar
+    span.upload-size {{fileSize}}
+
 template(name="attachmentsGalery")
   .attachments-galery
     each attachments
@@ -53,3 +60,4 @@ template(name="attachmentsGalery")
       unless currentUser.isCommentOnly
         li.attachment-item.add-attachment
           a.js-add-attachment {{_ 'add-attachment' }}
+

client/components/cards/attachments.js

@@ -66,18 +66,38 @@ Template.previewAttachedImagePopup.helpers({
   }
 });
 
+// For uploading popup
+
+let uploadFileSize = new ReactiveVar('');
+let uploadProgress = new ReactiveVar(0);
+
 Template.cardAttachmentsPopup.events({
-  'change .js-attach-file'(event) {
+  'change .js-attach-file'(event, instance) {
     const card = this;
-    const processFile = f => {
-      Utils.processUploadedAttachment(card, f,
-        (err, attachment) => {
+    const callbacks = {
+		    onBeforeUpload: (err, fileData) => {
+          Popup.open('uploading')(this.clickEvent);
+          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`);
+        },
+				onError: (err, fileObj) => {
+          console.log('Error!', err);
+        },
+        onProgress: (progress, fileData) => {
         }
-      );
+    };
+    const processFile = f => {
+      Utils.processUploadedAttachment(card, f, callbacks);
     };
 
     FS.Utility.eachFile(event, f => {
@@ -117,12 +137,22 @@ Template.cardAttachmentsPopup.events({
     });
   },
   'click .js-computer-upload'(event, templateInstance) {
+    this.clickEvent = event;
     templateInstance.find('.js-attach-file').click();
     event.preventDefault();
   },
   'click .js-upload-clipboard-image': Popup.open('previewClipboardImage'),
 });
 
+Template.uploadingPopup.onRendered(() => {
+});
+
+Template.uploadingPopup.helpers({
+  fileSize: () => {
+    return uploadFileSize.get();
+  }
+});
+
 const MAX_IMAGE_PIXEL = Utils.MAX_IMAGE_PIXEL;
 const COMPRESS_RATIO = Utils.IMAGE_COMPRESS_RATIO;
 let pastedResults = null;

client/components/main/editor.js

@@ -225,6 +225,7 @@ Template.editor.onRendered(() => {
                   $summernote.summernote('insertNode', img);
                 };
                 const processData = function(fileObj) {
+                  // FIXME: Change to new API
                   Utils.processUploadedAttachment(
                     currentCard,
                     fileObj,

client/lib/popup.js

@@ -49,7 +49,7 @@ window.Popup = new (class {
       // has one. This allows us to position a sub-popup exactly at the same
       // position than its parent.
       let openerElement;
-      if (clickFromPopup(evt)) {
+      if (clickFromPopup(evt) && self._getTopStack()) {
         openerElement = self._getTopStack().openerElement;
       } else {
         self._stack = [];

client/lib/utils.js

@@ -25,12 +25,7 @@ Utils = {
   },
   MAX_IMAGE_PIXEL: Meteor.settings.public.MAX_IMAGE_PIXEL,
   COMPRESS_RATIO: Meteor.settings.public.IMAGE_COMPRESS_RATIO,
-  processUploadedAttachment(card, fileObj, callback) {
-    const next = attachment => {
-      if (typeof callback === 'function') {
-        callback(attachment);
-      }
-    };
+  processUploadedAttachment(card, fileObj, callbacks) {
     if (!card) {
       return onUploaded();
     }
@@ -50,7 +45,16 @@ Utils = {
       settings.meta.cardId = card._id;
     }
     settings.meta.userId = Meteor.userId();
-    Attachments.insert(settings).on('end', next);
+    if (typeof callbacks === 'function') {
+      settings.onEnd = callbacks;
+    } else {
+      for (const key in callbacks) {
+        if (key.substring(0, 2) === 'on') {
+          settings[key] = callbacks[key];
+        }
+      }
+    }
+    Attachments.insert(settings);
   },
   shrinkImage(options) {
     // shrink image to certain size