Add Feature: Richer Editor insert picture as attachment instead of b64 string

3 files changed, 81 insertions, 36 deletions

diff --git a/client/components/cards/attachments.js b/client/components/cards/attachments.js
index d60169c3..843f1eb7 100644
--- a/client/components/cards/attachments.js
+++ b/client/components/cards/attachments.js
@@ -55,27 +55,12 @@ Template.cardAttachmentsPopup.events({
   'change .js-attach-file'(event) {
     const card = this;
     const processFile = f => {
-      const file = new FS.File(f);
-      if (card.isLinkedCard()) {
-        file.boardId = Cards.findOne(card.linkedId).boardId;
-        file.cardId = card.linkedId;
-      } else {
-        file.boardId = card.boardId;
-        file.swimlaneId = card.swimlaneId;
-        file.listId = card.listId;
-        file.cardId = card._id;
-      }
-      file.userId = Meteor.userId();
-      if (file.original) {
-        file.original.name = f.name;
-      }
-      const attachment = Attachments.insert(file);
-
-      if (attachment && attachment._id && attachment.isImage()) {
-        card.setCover(attachment._id);
-      }
-
-      Popup.close();
+      Utils.processUploadedAttachment(card, f, attachment => {
+        if (attachment && attachment._id && attachment.isImage()) {
+          card.setCover(attachment._id);
+        }
+        Popup.close();
+      });
     };
 
     FS.Utility.eachFile(event, f => {
diff --git a/client/components/main/editor.js b/client/components/main/editor.js
index e217e113..248f4588 100755
--- a/client/components/main/editor.js
+++ b/client/components/main/editor.js
@@ -176,36 +176,71 @@ Template.editor.onRendered(() => {
               const $summernote = getSummernote(this);
               if (files && files.length > 0) {
                 const image = files[0];
-                const reader = new FileReader();
+                const currentCard = Cards.findOne(Session.get('currentCard'));
                 const MAX_IMAGE_PIXEL = Utils.MAX_IMAGE_PIXEL;
                 const COMPRESS_RATIO = Utils.IMAGE_COMPRESS_RATIO;
-                const processData = function(dataURL) {
+                const insertImage = src => {
                   const img = document.createElement('img');
-                  img.src = dataURL;
+                  img.src = src;
                   img.setAttribute('width', '100%');
                   $summernote.summernote('insertNode', img);
                 };
-                reader.onload = function(e) {
-                  const dataurl = e && e.target && e.target.result;
-                  if (dataurl !== undefined) {
-                    if (MAX_IMAGE_PIXEL) {
+                const processData = function(fileObj) {
+                  Utils.processUploadedAttachment(
+                    currentCard,
+                    fileObj,
+                    attachment => {
+                      if (
+                        attachment &&
+                        attachment._id &&
+                        attachment.isImage()
+                      ) {
+                        attachment.one('uploaded', function() {
+                          const maxTry = 3;
+                          const checkItvl = 500;
+                          let retry = 0;
+                          const checkUrl = function() {
+                            // even though uploaded event fired, attachment.url() is still null somehow //TODO
+                            const url = attachment.url();
+                            if (url) {
+                              insertImage(url);
+                            } else {
+                              retry++;
+                              if (retry < maxTry) {
+                                setTimeout(checkUrl, checkItvl);
+                              }
+                            }
+                          };
+                          checkUrl();
+                        });
+                      }
+                    },
+                  );
+                };
+                if (MAX_IMAGE_PIXEL) {
+                  const reader = new FileReader();
+                  reader.onload = function(e) {
+                    const dataurl = e && e.target && e.target.result;
+                    if (dataurl !== undefined) {
                       // need to shrink image
                       Utils.shrinkImage({
                         dataurl,
                         maxSize: MAX_IMAGE_PIXEL,
                         ratio: COMPRESS_RATIO,
-                        callback(changed) {
-                          if (changed !== false && !!changed) {
-                            processData(changed);
+                        toBlob: true,
+                        callback(blob) {
+                          if (blob !== false) {
+                            blob.name = image.name;
+                            processData(blob);
                           }
                         },
                       });
-                    } else {
-                      processData(dataurl);
                     }
-                  }
-                };
-                reader.readAsDataURL(image);
+                  };
+                  reader.readAsDataURL(image);
+                } else {
+                  processData(image);
+                }
               }
             },
             onPaste() {
diff --git a/client/lib/utils.js b/client/lib/utils.js
index f81e691c..81835929 100644
--- a/client/lib/utils.js
+++ b/client/lib/utils.js
@@ -26,6 +26,31 @@ 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);
+      }
+    };
+    if (!card) {
+      return next();
+    }
+    const file = new FS.File(fileObj);
+    if (card.isLinkedCard()) {
+      file.boardId = Cards.findOne(card.linkedId).boardId;
+      file.cardId = card.linkedId;
+    } else {
+      file.boardId = card.boardId;
+      file.swimlaneId = card.swimlaneId;
+      file.listId = card.listId;
+      file.cardId = card._id;
+    }
+    file.userId = Meteor.userId();
+    if (file.original) {
+      file.original.name = fileObj.name;
+    }
+    return next(Attachments.insert(file));
+  },
   shrinkImage(options) {
     // shrink image to certain size
     const dataurl = options.dataurl,