Issue #550 - Alert user when attachment size exceeds 1MB limit.

3 files changed, 67 insertions, 3 deletions

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 786fcb1e..65c7ee09 100644
--- a/web-ui/app/js/mail_view/ui/attachment_list.js
+++ b/web-ui/app/js/mail_view/ui/attachment_list.js
@@ -17,11 +17,12 @@
 
 define(
     [
+        'views/templates',
         'page/events',
         'helpers/view_helper'
     ],
 
-    function (events, viewHelper) {
+    function (templates, events, viewHelper) {
         'use strict';
 
         function attachmentList() {
@@ -30,7 +31,11 @@ define(
                 attachmentListItem: '#attachment-list-item',
                 progressBar: '#progress .progress-bar',
                 attachmentBaseUrl: '/attachment',
-                attachments: []
+                attachments: [],
+                closeIcon: '.close-icon',
+                uploadError: '#upload-error',
+                dismissButton: '#dismiss-button',
+                uploadFileButton: '#upload-file-button'
             });
 
             this.showAttachment = function (ev, data) {
@@ -57,6 +62,42 @@ define(
             this.addJqueryFileUploadConfig = function() {
                 var self = this;
                 this.select('inputFileUpload').fileupload({
+                    add: function(e, data) {
+                        var uploadError = self.select('uploadError');
+                        if (uploadError) {
+                            uploadError.remove();
+                        }
+
+                        var uploadErrors = [];
+
+                        this.showUploadFailed = function () {
+                            var html = $(templates.compose.uploadAttachmentFailed());
+                            html.insertAfter(self.$node.find(self.attr.attachmentListItem));
+
+                            self.on(self.select('closeIcon'), 'click', this.dismissUploadFailed);
+                            self.on(self.select('dismissButton'), 'click', this.dismissUploadFailed);
+                            self.on(self.select('uploadFileButton'), 'click', this.uploadAnotherFile);
+                        };
+
+                        this.dismissUploadFailed = function (event) {
+                            event.preventDefault();
+                            self.select('uploadError').remove();
+                        };
+
+                        this.uploadAnotherFile = function (event) {
+                            event.preventDefault();
+                            self.startUpload();
+                        };
+
+                        if(data.originalFiles[0].size > 1000000) {
+                            uploadErrors.push('Filesize is too big');
+                        }
+                        if(uploadErrors.length > 0) {
+                            this.showUploadFailed();
+                        } else {
+                            data.submit();
+                        }
+                    },
                     url: self.attr.attachmentBaseUrl,
                     dataType: 'json',
                     done: function (e, response) {
diff --git a/web-ui/app/js/views/templates.js b/web-ui/app/js/views/templates.js
index d0a1ccde..c799b052 100644
--- a/web-ui/app/js/views/templates.js
+++ b/web-ui/app/js/views/templates.js
@@ -27,7 +27,8 @@ define(['hbs/templates'], function (templates) {
       fixedRecipient: window.Pixelated['app/templates/compose/fixed_recipient.hbs'],
       recipients: window.Pixelated['app/templates/compose/recipients.hbs'],
       feedback: window.Pixelated['app/templates/compose/feedback_box.hbs'],
-      attachmentsList: window.Pixelated['app/templates/compose/attachments_list.hbs']
+      attachmentsList: window.Pixelated['app/templates/compose/attachments_list.hbs'],
+      uploadAttachmentFailed: window.Pixelated['app/templates/compose/upload_attachment_failed.hbs']
     },
     tags: {
       tagList: window.Pixelated['app/templates/tags/tag_list.hbs'],
@@ -73,6 +74,7 @@ define(['hbs/templates'], function (templates) {
   Handlebars.registerPartial('tag_inner', Templates.tags.tagInner);
   Handlebars.registerPartial('recipients', Templates.compose.recipients);
   Handlebars.registerPartial('attachments_list', Templates.compose.attachmentsList);
+  Handlebars.registerPartial('uploadAttachmentFailed', Templates.compose.uploadAttachmentFailed);
 
   return Templates;
 });
diff --git a/web-ui/app/scss/_compose.scss b/web-ui/app/scss/_compose.scss
index 0186287f..91faf0bd 100644
--- a/web-ui/app/scss/_compose.scss
+++ b/web-ui/app/scss/_compose.scss
@@ -133,6 +133,27 @@
       .attachmentsArea {
           padding: 0;
           border-top: 0;
+
+          #upload-error {
+              color: $error;
+              margin-bottom: 20px;
+
+              .close-icon {
+                  font-size: 1.0rem;
+                  cursor: pointer;
+              }
+
+              span, a {
+                  color: $error;
+                  font-size: 0.9rem;
+              }
+
+              a {
+                  text-decoration: underline;
+                  padding: 5px;
+              }
+          }
+
       }
   }