Issue #551 - Show attachment name during upload

4 files changed, 17 insertions, 12 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 294a21a2..b3b26710 100644
--- a/web-ui/app/js/mail_view/ui/attachment_list.js
+++ b/web-ui/app/js/mail_view/ui/attachment_list.js
@@ -112,12 +112,18 @@ define(
                 }
             };
 
-            this.showUploadProgressBar = function() {
+            this.showUploadProgressBar = function(e, data) {
+                var element = $(templates.compose.attachmentUploadItem({
+                    name: data.originalFiles[0].name,
+                    size: data.originalFiles[0].size
+                }));
+                this.select('attachmentUploadItem').append(element);
                 this.select('attachmentUploadItem').show();
             };
 
             this.hideUploadProgressBar = function() {
                 this.select('attachmentUploadItem').hide();
+                this.select('attachmentUploadItem').empty();
             };
 
             this.attachUploadAbort = function(e, data) {
@@ -139,7 +145,7 @@ define(
                 this.select('inputFileUpload').fileupload({
                     add: function(e, data) {
                         if (self.performPreUploadCheck(e, data)) {
-                            self.showUploadProgressBar();
+                            self.showUploadProgressBar(e, data);
                             self.attachUploadAbort(e, data);
                             data.submit();
                         } else {
@@ -149,13 +155,13 @@ define(
                     url: self.attr.attachmentBaseUrl,
                     dataType: 'json',
                     done: function (e, response) {
-                        self.hideUploadProgressBar();
                         self.detachUploadAbort();
+                        self.hideUploadProgressBar();
                         self.trigger(document, events.mail.uploadedAttachment, response.result);
                     },
                     fail: function(e, data){
-                        self.hideUploadProgressBar();
                         self.detachUploadAbort();
+                        self.hideUploadProgressBar();
                         self.trigger(document, events.mail.failedUploadAttachment);
                     },
                     progressall: function (e, data) {
diff --git a/web-ui/app/js/views/templates.js b/web-ui/app/js/views/templates.js
index f9d944b8..d4185471 100644
--- a/web-ui/app/js/views/templates.js
+++ b/web-ui/app/js/views/templates.js
@@ -29,6 +29,7 @@ define(['hbs/templates'], function (templates) {
       feedback: window.Pixelated['app/templates/compose/feedback_box.hbs'],
       attachmentsList: window.Pixelated['app/templates/compose/attachments_list.hbs'],
       attachmentItem: window.Pixelated['app/templates/compose/attachment_item.hbs'],
+      attachmentUploadItem: window.Pixelated['app/templates/compose/attachment_upload_item.hbs'],
       uploadAttachmentFailed: window.Pixelated['app/templates/compose/upload_attachment_failed.hbs']
     },
     tags: {
@@ -77,6 +78,7 @@ define(['hbs/templates'], function (templates) {
   Handlebars.registerPartial('attachments_list', Templates.compose.attachmentsList);
   Handlebars.registerPartial('attachments_upload', Templates.compose.attachmentsList);
   Handlebars.registerPartial('attachment_item', Templates.compose.attachmentItem);
+  Handlebars.registerPartial('attachment_upload_item', Templates.compose.attachmentUploadItem);
   Handlebars.registerPartial('uploadAttachmentFailed', Templates.compose.uploadAttachmentFailed);
 
   return Templates;
diff --git a/web-ui/app/templates/compose/attachment_upload_item.hbs b/web-ui/app/templates/compose/attachment_upload_item.hbs
new file mode 100644
index 00000000..ff783267
--- /dev/null
+++ b/web-ui/app/templates/compose/attachment_upload_item.hbs
@@ -0,0 +1,4 @@
+<li>
+    <div id="attachment-upload-item-progress" class="progress"><div class="progress-bar progress-bar-success"></div></div>
+    <a>{{ this.name }} <span class="attachment-size">({{ formatSize this.size}})</span><i id="attachment-upload-item-abort" class="fa fa-close remove-icon"></i></a>
+</li>
diff --git a/web-ui/app/templates/compose/attachments_list.hbs b/web-ui/app/templates/compose/attachments_list.hbs
index 0091583d..4d3f1cac 100644
--- a/web-ui/app/templates/compose/attachments_list.hbs
+++ b/web-ui/app/templates/compose/attachments_list.hbs
@@ -12,14 +12,7 @@
                     {{> attachment_item this }}
                 {{/each }}
             </ul>
-            <ul id="attachment-upload-item">
-                <li>
-                    <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>
+            <ul id="attachment-upload-item"></ul>
         </div>
     </div>