Merge branch 'lib-change' of https://github.com/PDIS/wekan into

PDIS-lib-change

9 files changed, 166 insertions, 69 deletions

diff --git a/client/components/activities/activities.js b/client/components/activities/activities.js
index 5d356f6e..186200ec 100644
--- a/client/components/activities/activities.js
+++ b/client/components/activities/activities.js
@@ -152,17 +152,18 @@ BlazeComponent.extendComponent({
 
   attachmentLink() {
     const attachment = this.currentData().activity.attachment();
+    const link = attachment.link('original', '/');
     // trying to display url before file is stored generates js errors
     return (
       (attachment &&
-        attachment.url({ download: true }) &&
+        link &&
         Blaze.toHTML(
           HTML.A(
             {
-              href: attachment.url({ download: true }),
+              href: link,
               target: '_blank',
             },
-            attachment.name(),
+            attachment.name,
           ),
         )) ||
       this.currentData().activity.attachmentName
diff --git a/client/components/cards/attachments.jade b/client/components/cards/attachments.jade
index 61454fa7..eda6d118 100644
--- a/client/components/cards/attachments.jade
+++ b/client/components/cards/attachments.jade
@@ -18,12 +18,19 @@ template(name="attachmentDeletePopup")
   p {{_ "attachment-delete-pop"}}
   button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
 
+template(name="uploadingPopup")
+  .uploading-info
+    span.upload-percentage {{progress}}%
+    .upload-progress-frame
+      .upload-progress-bar(style="width: {{progress}}%;")
+    span.upload-size {{fileSize}}
+
 template(name="attachmentsGalery")
   .attachments-galery
     each attachments
       .attachment-item
-        a.attachment-thumbnail.swipebox(href="{{url}}" title="{{name}}")
-          if isUploaded
+        a.attachment-thumbnail.swipebox(href="{{url}}" download="{{name}}" title="{{name}}")
+          if isUploaded 
             if isImage
               img.attachment-thumbnail-img(src="{{url}}")
             else
@@ -33,7 +40,7 @@ template(name="attachmentsGalery")
         p.attachment-details
           = name
           span.attachment-details-actions
-            a.js-download(href="{{url download=true}}")
+            a.js-download(href="{{url download=true}}" download="{{name}}")
               i.fa.fa-download
               | {{_ 'download'}}
             if currentUser.isBoardMember
diff --git a/client/components/cards/attachments.js b/client/components/cards/attachments.js
index e4439155..81f6c6e1 100644
--- a/client/components/cards/attachments.js
+++ b/client/components/cards/attachments.js
@@ -13,10 +13,10 @@ Template.attachmentsGalery.events({
     event.stopPropagation();
   },
   'click .js-add-cover'() {
-    Cards.findOne(this.cardId).setCover(this._id);
+    Cards.findOne(this.meta.cardId).setCover(this._id);
   },
   'click .js-remove-cover'() {
-    Cards.findOne(this.cardId).unsetCover();
+    Cards.findOne(this.meta.cardId).unsetCover();
   },
   'click .js-preview-image'(event) {
     Popup.open('previewAttachedImage').call(this, event);
@@ -45,22 +45,63 @@ Template.attachmentsGalery.events({
   },
 });
 
+Template.attachmentsGalery.helpers({
+  url() {
+    return Attachments.link(this, 'original', '/'); 
+  },
+  isUploaded() {
+    return !this.meta.uploading;
+  },
+  isImage() {
+    return !!this.isImage;
+  },
+});
+
 Template.previewAttachedImagePopup.events({
   'click .js-large-image-clicked'() {
     Popup.close();
   },
 });
 
+Template.previewAttachedImagePopup.helpers({
+  url() {
+    return Attachments.link(this, 'original', '/');
+  }
+});
+
+// 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, attachment => {
-        if (attachment && attachment._id && attachment.isImage()) {
-          card.setCover(attachment._id);
+    const callbacks = {
+		    onBeforeUpload: (err, fileData) => {
+          Popup.open('uploading')(this.clickEvent);
+          uploadFileSize.set('...');
+          uploadProgress.set(0);
+          return true;
+        },
+        onUploaded: (err, attachment) => {
+          if (attachment && attachment._id && attachment.isImage) {
+            card.setCover(attachment._id);
+          }
+          Popup.close();
+        },
+        onStart: (error, fileData) => {
+          uploadFileSize.set(formatBytes(fileData.size));
+        },
+				onError: (err, fileObj) => {
+          console.log('Error!', err);
+        },
+        onProgress: (progress, fileData) => {
+          uploadProgress.set(progress);
         }
-        Popup.close();
-      });
+    };
+    const processFile = f => {
+      Utils.processUploadedAttachment(card, f, callbacks);
     };
 
     FS.Utility.eachFile(event, f => {
@@ -100,12 +141,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.helpers({
+  fileSize: () => {
+    return uploadFileSize.get();
+  },
+  progress: () => {
+    return uploadProgress.get();
+  }
+});
+
 const MAX_IMAGE_PIXEL = Utils.MAX_IMAGE_PIXEL;
 const COMPRESS_RATIO = Utils.IMAGE_COMPRESS_RATIO;
 let pastedResults = null;
@@ -149,20 +200,26 @@ Template.previewClipboardImagePopup.events({
     if (results && results.file) {
       window.oPasted = pastedResults;
       const card = this;
-      const file = new FS.File(results.file);
+      const settings = {
+        file: results.file,
+        streams: 'dynamic',
+        chunkSize: 'dynamic',
+      };
       if (!results.name) {
         // if no filename, it's from clipboard. then we give it a name, with ext name from MIME type
         if (typeof results.file.type === 'string') {
-          file.name(results.file.type.replace('image/', 'clipboard.'));
+          settings.fileName =
+            new Date().getTime() + results.file.type.replace('.+/', '');
         }
       }
-      file.updatedAt(new Date());
-      file.boardId = card.boardId;
-      file.cardId = card._id;
-      file.userId = Meteor.userId();
-      const attachment = Attachments.insert(file);
+      settings.meta = {};
+      settings.meta.updatedAt = new Date().getTime();
+      settings.meta.boardId = card.boardId;
+      settings.meta.cardId = card._id;
+      settings.meta.userId = Meteor.userId();
+      const attachment = Attachments.insert(settings);
 
-      if (attachment && attachment._id && attachment.isImage()) {
+      if (attachment && attachment._id && attachment.isImage) {
         card.setCover(attachment._id);
       }
 
@@ -172,3 +229,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
diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade
index 79dd9127..e9de2fea 100644
--- a/client/components/cards/minicard.jade
+++ b/client/components/cards/minicard.jade
@@ -11,7 +11,7 @@ template(name="minicard")
         .handle
           .fa.fa-arrows
     if cover
-      .minicard-cover(style="background-image: url('{{cover.url}}');")
+      .minicard-cover(style="background-image: url('{{coverUrl}}');")
     if labels
       .minicard-labels
         each labels
diff --git a/client/components/cards/minicard.js b/client/components/cards/minicard.js
index da36b87f..200e019d 100644
--- a/client/components/cards/minicard.js
+++ b/client/components/cards/minicard.js
@@ -52,4 +52,7 @@ Template.minicard.helpers({
       return false;
     }
   },
+  coverUrl() {
+    return Attachments.findOne(this.coverId).link('original', '/');
+  },
 });
diff --git a/client/components/main/editor.js b/client/components/main/editor.js
index 0c2e3186..abe4160f 100755
--- a/client/components/main/editor.js
+++ b/client/components/main/editor.js
@@ -152,33 +152,31 @@ Template.editor.onRendered(() => {
                 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(
-                                `${location.protocol}//${location.host}${url}`,
-                              );
-                            } else {
-                              retry++;
-                              if (retry < maxTry) {
-                                setTimeout(checkUrl, checkItvl);
+                    fileObj, 
+                    { onUploaded:
+                      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 = Attachments.link(attachment, 'original', '/');
+                              if (url) {
+                                insertImage(
+                                  `${location.protocol}//${location.host}${url}`,
+                                );
+                              } else {
+                                retry++;
+                                if (retry < maxTry) {
+                                  setTimeout(checkUrl, checkItvl);
+                                }
                               }
-                            }
-                          };
-                          checkUrl();
-                        });
+                            };
+                            checkUrl();
+                          });
+                        }
                       }
                     },
                   );
diff --git a/client/lib/popup.js b/client/lib/popup.js
index 8095fbd2..cae22659 100644
--- a/client/lib/popup.js
+++ b/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 = [];
diff --git a/client/lib/utils.js b/client/lib/utils.js
index c921fddc..e72f177e 100644
--- a/client/lib/utils.js
+++ b/client/lib/utils.js
@@ -61,30 +61,38 @@ 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 next();
+      return onUploaded();
     }
-    const file = new FS.File(fileObj);
+    let settings = {
+      file: fileObj,
+      streams: 'dynamic',
+      chunkSize: 'dynamic',
+    };
+    settings.meta = {
+      uploading: true
+    };
     if (card.isLinkedCard()) {
-      file.boardId = Cards.findOne(card.linkedId).boardId;
-      file.cardId = card.linkedId;
+      settings.meta.boardId = Cards.findOne(card.linkedId).boardId;
+      settings.meta.cardId = card.linkedId;
     } else {
-      file.boardId = card.boardId;
-      file.swimlaneId = card.swimlaneId;
-      file.listId = card.listId;
-      file.cardId = card._id;
+      settings.meta.boardId = card.boardId;
+      settings.meta.swimlaneId = card.swimlaneId;
+      settings.meta.listId = card.listId;
+      settings.meta.cardId = card._id;
     }
-    file.userId = Meteor.userId();
-    if (file.original) {
-      file.original.name = fileObj.name;
+    settings.meta.userId = Meteor.userId();
+    if (typeof callbacks === 'function') {
+      settings.onEnd = callbacks;
+    } else {
+      for (const key in callbacks) {
+        if (key.substring(0, 2) === 'on') {
+          settings[key] = callbacks[key];
+        }
+      }
     }
-    return next(Attachments.insert(file));
+    Attachments.insert(settings);
   },
   shrinkImage(options) {
     // shrink image to certain size