Issue #552 - Add upload abort

Cancels an upload and restores the user interface to ready-for-upload state

8 files changed, 52 insertions, 2 deletions

diff --git a/web-ui/app/js/mail_view/ui/attachment_icon.js b/web-ui/app/js/mail_view/ui/attachment_icon.js
index 6b9cb31c..e04fc02a 100644
--- a/web-ui/app/js/mail_view/ui/attachment_icon.js
+++ b/web-ui/app/js/mail_view/ui/attachment_icon.js
@@ -49,6 +49,7 @@ define(
                     this.render();
                     this.on(document, events.mail.uploadingAttachment, this.uploadInProgress);
                     this.on(document, events.mail.uploadedAttachment, this.uploadFinished);
+                    this.on(document, events.mail.failedUploadAttachment, this.uploadFinished);
                 }
                 this.on(this.$node, 'click', function() {
                     if (!this.attr.busy) {
diff --git a/web-ui/app/js/mail_view/ui/attachment_list.js b/web-ui/app/js/mail_view/ui/attachment_list.js
index 19a48a8d..936b2e81 100644
--- a/web-ui/app/js/mail_view/ui/attachment_list.js
+++ b/web-ui/app/js/mail_view/ui/attachment_list.js
@@ -31,6 +31,7 @@ define(
                 attachmentListItem: '#attachment-list-item',
                 attachmentUploadItem: '#attachment-upload-item',
                 attachmentUploadItemProgress: '#attachment-upload-item-progress',
+                attachmentUploadItemAbort: '#attachment-upload-item-abort',
                 attachmentBaseUrl: '/attachment',
                 attachments: [],
                 closeIcon: '.close-icon',
@@ -119,6 +120,13 @@ define(
                 this.select('attachmentUploadItem').hide();
             };
 
+            this.attachUploadAbort = function(e, data) {
+                this.on(this.select('attachmentUploadItemAbort'), 'click', function(e) {
+                    data.abort();
+                    e.preventDefault();
+                });
+            };
+
             this.addJqueryFileUploadConfig = function() {
                 var self = this;
 
@@ -128,6 +136,7 @@ define(
                     add: function(e, data) {
                         if (self.performPreUploadCheck(e, data)) {
                             self.showUploadProgressBar();
+                            self.attachUploadAbort(e, data);
                             data.submit();
                         } else {
                             self.showUploadError();
@@ -139,6 +148,10 @@ define(
                         self.hideUploadProgressBar();
                         self.trigger(document, events.mail.uploadedAttachment, response.result);
                     },
+                    fail: function(e, data){
+                        self.hideUploadProgressBar();
+                        self.trigger(document, events.mail.failedUploadAttachment);
+                    },
                     progressall: function (e, data) {
                         var progressRate = parseInt(data.loaded / data.total * 100, 10);
                         self.select('attachmentUploadItemProgress').css('width', progressRate + '%');
diff --git a/web-ui/app/js/mail_view/ui/send_button.js b/web-ui/app/js/mail_view/ui/send_button.js
index b1f35906..c4cf86dc 100644
--- a/web-ui/app/js/mail_view/ui/send_button.js
+++ b/web-ui/app/js/mail_view/ui/send_button.js
@@ -116,6 +116,7 @@ define([
 
         this.on(document, events.mail.uploadingAttachment, this.uploadInProgress);
         this.on(document, events.mail.uploadedAttachment, this.uploadFinished);
+        this.on(document, events.mail.failedUploadAttachment, this.uploadFinished);
 
         this.on(document, events.dispatchers.rightPane.clear, this.teardown);
         this.on(document, events.ui.sendbutton.enable, this.resetButton);
diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js
index 57dd346a..1ec27c46 100644
--- a/web-ui/app/js/page/events.js
+++ b/web-ui/app/js/page/events.js
@@ -146,6 +146,7 @@ define(function () {
       uploadedAttachment: 'mail:uploaded:attachment',
       uploadingAttachment: 'mail:uploading:attachment',
       startUploadAttachment: 'mail:start:upload:attachment',
+      failedUploadAttachment: 'mail:failed:upload:attachment',
       appendAttachment: 'mail:append:attachment',
       resetAttachments: 'mail:reset:attachments',
       removeAttachment: 'mail:remove:attachment'
diff --git a/web-ui/app/scss/_compose.scss b/web-ui/app/scss/_compose.scss
index dfde3d19..a0c1d923 100644
--- a/web-ui/app/scss/_compose.scss
+++ b/web-ui/app/scss/_compose.scss
@@ -129,6 +129,7 @@
 
   #attachment-upload-item {
     display: none;
+    line-height: 28px;
 
     .progress {
       width: 0%;
diff --git a/web-ui/app/templates/compose/attachments_list.hbs b/web-ui/app/templates/compose/attachments_list.hbs
index 639c395a..0091583d 100644
--- a/web-ui/app/templates/compose/attachments_list.hbs
+++ b/web-ui/app/templates/compose/attachments_list.hbs
@@ -14,10 +14,10 @@
             </ul>
             <ul id="attachment-upload-item">
                 <li>
-                    <a>Uploading...</a>
                     <div id="attachment-upload-item-progress" class="progress">
                         <div class="progress-bar"></div>
                     </div>
+                    <a>Uploading... <i id="attachment-upload-item-abort" class="fa fa-close remove-icon"></i></a>
                 </li>
             </ul>
         </div>
diff --git a/web-ui/test/spec/mail_view/ui/attachment_icon.spec.js b/web-ui/test/spec/mail_view/ui/attachment_icon.spec.js
index 1b2f182e..86ef420b 100644
--- a/web-ui/test/spec/mail_view/ui/attachment_icon.spec.js
+++ b/web-ui/test/spec/mail_view/ui/attachment_icon.spec.js
@@ -17,12 +17,30 @@ describeComponent('mail_view/ui/attachment_icon', function () {
         expect(this.component.attr.busy).toBe(true);
     });
 
+    it('should be busy after upload event', function() {
+      $(document).trigger(Pixelated.events.mail.uploadingAttachment);
+
+      expect(this.component.attr.busy).toBe(true);
+    });
+
     it('should not be busy', function() {
         this.component.uploadFinished();
 
         expect(this.component.attr.busy).toBe(false);
     });
 
+    it('should not be busy after upload finished event', function() {
+        $(document).trigger(Pixelated.events.mail.uploadedAttachment);
+
+        expect(this.component.attr.busy).toBe(false);
+    });
+
+    it('should not be busy after upload failed event', function() {
+        $(document).trigger(Pixelated.events.mail.failedUploadAttachment);
+
+        expect(this.component.attr.busy).toBe(false);
+    });
+
     it('should trigger start of attachment upload process', function () {
         var triggerUploadAttachment = spyOnEvent(document, Pixelated.events.mail.startUploadAttachment);
 
diff --git a/web-ui/test/spec/mail_view/ui/attachment_list.spec.js b/web-ui/test/spec/mail_view/ui/attachment_list.spec.js
index 1b351d36..79f4b81e 100644
--- a/web-ui/test/spec/mail_view/ui/attachment_list.spec.js
+++ b/web-ui/test/spec/mail_view/ui/attachment_list.spec.js
@@ -5,7 +5,7 @@ describeMixin('mail_view/ui/attachment_list', function () {
         beforeEach(function () {
             this.setupComponent('<div id="attachment-list">' +
                 '<ul id="attachment-list-item"></ul>' +
-                '<ul id="attachment-upload-item"><li><a>Uploading...</a><div id="attachment-upload-item-progress" class="progress"><div class="progress-bar progress-bar-success"></div></div></li></ul>' +
+                '<ul id="attachment-upload-item"><li><div id="attachment-upload-item-progress" class="progress"><div class="progress-bar progress-bar-success"></div></div><a>Uploading... <i id="attachment-upload-item-abort" class="fa fa-close remove-icon"></i></a></li></ul>' +
                 '</div>');
         });
 
@@ -57,6 +57,21 @@ describeMixin('mail_view/ui/attachment_list', function () {
                 });
             });
 
+            describe('Cancel', function() {
+                it('should cancel the upload', function() {
+                    var fakeJQXHR = {
+                        abort: function() {}
+                    };
+                    spyOn(fakeJQXHR, 'abort');
+                    // this.component.showUploadProgressBar();
+                    this.component.attachUploadAbort(null, fakeJQXHR);
+
+                    this.component.select('attachmentUploadItemAbort').click();
+
+                    expect(fakeJQXHR.abort).toHaveBeenCalled();
+                });
+            });
+
             describe('Error', function() {
                 it('should show error message', function () {
                     this.component.showUploadError();