- Added attachment upload indicator with parallel upload (#1486058)

CHANGELOG

@@ -1,6 +1,7 @@
 CHANGELOG RoundCube Webmail
 ===========================
 
+- Added attachment upload indicator with parallel upload (#1486058)
 - Use default_charset for bodies of messages without charset definition (#1486187)
 - Password: added cPanel driver
 - Fix return to first page from e-mail screen (#1486105)

plugins/filesystem_attachments/filesystem_attachments.php

@@ -57,7 +57,7 @@ class filesystem_attachments extends rcube_plugin
         $tmpfname = tempnam($temp_dir, 'rcmAttmnt');
 
         if (move_uploaded_file($args['path'], $tmpfname) && file_exists($tmpfname)) {
-            $args['id'] = count($_SESSION['plugins']['filesystem_attachments']['tmp_files'])+1;
+            $args['id'] = $this->file_id();
             $args['path'] = $tmpfname;
             $args['status'] = true;
 
@@ -88,7 +88,7 @@ class filesystem_attachments extends rcube_plugin
                 return $args;
         }
         
-        $args['id'] = count($_SESSION['plugins']['filesystem_attachments']['tmp_files'])+1;
+        $args['id'] = $this->file_id();
         $args['status'] = true;
             
         // Note the file for later cleanup
@@ -146,4 +146,11 @@ class filesystem_attachments extends rcube_plugin
         }
         return $args;
     }
+
+    function file_id()
+    {
+        $userid = rcmail::get_instance()->user->ID;
+	list($usec, $sec) = explode(' ', microtime()); 
+        return preg_replace('/[^0-9]/', '', $userid . $sec . $usec);
+    }
 }

program/js/app.js

@@ -1631,7 +1631,7 @@ function rcube_webmail()
       add_url += '&_search='+this.env.search_request;
       
     // set page=1 if changeing to another mailbox
-    if (!page && this.env.mailbox != mbox)
+    if (!page)
       {
       page = 1;
       this.env.current_page = page;
@@ -2171,6 +2171,14 @@ function rcube_webmail()
       return false;
       }
 
+    // check if all files has been uploaded
+    if (this.gui_objects.attachmentlist) {
+      var list = this.gui_objects.attachmentlist.getElementsByTagName("li");
+      for (i=0;i<list.length;i++)
+        if (!String(list[i].id).match(/^rcmfile/))
+          return false;
+    }
+    
     // display localized warning for missing subject
     if (input_subject.val() == '')
       {
@@ -2450,10 +2458,38 @@ function rcube_webmail()
         document.body.appendChild(frame);
         }
 
+      // handle upload errors, parsing iframe content in onload
+      var fr = document.getElementsByName(frame_name)[0];
+      $(fr).bind('load', {ts:ts}, function(e) {
+	var content = '';
+        try {
+          if (this.contentDocument) {
+	    var d = this.contentDocument;
+	  } else if (this.contentWindow) {
+	    var d = this.contentWindow.document;
+	  }
+	  content = d.childNodes[0].innerHTML;
+        } catch (e) {}
+
+	if (!content.match(/add2attachment/)) {
+	alert(content)
+	  rcmail.display_message(rcmail.get_label('fileuploaderror'), 'error');
+	  rcmail.remove_from_attachment_list(e.data.ts);
+        }
+      });
+
       form.target = frame_name;
-      form.action = this.env.comm_path+'&_action=upload';
+      form.action = this.env.comm_path+'&_action=upload&_uploadid='+ts;
       form.setAttribute('enctype', 'multipart/form-data');
       form.submit();
+      
+      // hide upload form
+      this.show_attachment_form(false);
+      // display upload indicator
+      var content = this.get_label('uploading');
+      if (this.env.loadingicon)
+        content = '<img src="'+this.env.loadingicon+'" alt="" />'+content;
+      this.add2attachment_list(ts, content);
       }
     
     // set reference to the form object
@@ -2463,12 +2499,21 @@ function rcube_webmail()
 
   // add file name to attachment list
   // called from upload page
-  this.add2attachment_list = function(name, content)
+  this.add2attachment_list = function(name, content, upload_id)
     {
     if (!this.gui_objects.attachmentlist)
       return false;
     
-    $('<li>').attr('id', name).html(content).appendTo(this.gui_objects.attachmentlist);
+    var indicator;
+    // replace indicator's li
+    if (upload_id && (indicator = document.getElementById(upload_id))) {
+      var li = document.createElement('li');
+      $(li).attr('id', name).html(content);
+      indicator.parentNode.replaceChild(li, indicator);
+      } else { // add new li
+      $('<li>').attr('id', name).html(content).appendTo(this.gui_objects.attachmentlist);
+      }
+    
     return true;
     };
 

program/localization/en_US/messages.inc

@@ -28,6 +28,7 @@ $messages['nomessagesfound'] = 'No messages found in this mailbox';
 $messages['loggedout'] = 'You have successfully terminated the session. Good bye!';
 $messages['mailboxempty'] = 'Mailbox is empty';
 $messages['loading'] = 'Loading...';
+$messages['uploading'] = 'Uploading file...';
 $messages['loadingdata'] = 'Loading data...';
 $messages['checkingmail'] = 'Checking for new messages...';
 $messages['sendingmessage'] = 'Sending message...';

program/localization/pl_PL/messages.inc

@@ -32,6 +32,7 @@ $messages['nomessagesfound'] = 'Brak wiadomości w skrzynce.';
 $messages['loggedout'] = 'Użytkownik wylogował się poprawnie.';
 $messages['mailboxempty'] = 'Skrzynka jest pusta!';
 $messages['loading'] = 'Ładowanie...';
+$messages['uploading'] = 'Zapisywanie pliku...';
 $messages['loadingdata'] = 'Ładowanie danych...';
 $messages['checkingmail'] = 'Sprawdzanie nowych wiadomości...';
 $messages['sendingmessage'] = 'Wysyłanie wiadomości...';

program/steps/mail/attachments.inc

@@ -74,6 +74,8 @@ if (!is_array($_SESSION['compose']['attachments'])) {
 // clear all stored output properties (like scripts and env vars)
 $OUTPUT->reset();
 
+$uploadid = get_input_value('_uploadid', RCUBE_INPUT_GET);
+
 if (is_array($_FILES['_attachments']['tmp_name'])) {
   foreach ($_FILES['_attachments']['tmp_name'] as $i => $filepath) {
     $attachment = array(
@@ -109,7 +111,7 @@ if (is_array($_FILES['_attachments']['tmp_name'])) {
 
       $content .= Q($attachment['name']);
       
-      $OUTPUT->command('add2attachment_list', "rcmfile$id", $content);
+      $OUTPUT->command('add2attachment_list', "rcmfile$id", $content, $uploadid);
     }
     else {  // upload failed
       $err = $_FILES['_attachments']['error'][$i];
@@ -124,6 +126,7 @@ if (is_array($_FILES['_attachments']['tmp_name'])) {
       }
     
       $OUTPUT->command('display_message', $msg, 'error');
+      $OUTPUT->command('remove_from_attachment_list', $uploadid);
     }
   }
 }
@@ -135,10 +138,10 @@ else if ($_SERVER['REQUEST_METHOD'] == 'POST') {
   else
     $msg = rcube_label('fileuploaderror');
   $OUTPUT->command('display_message', $msg, 'error');
+  $OUTPUT->command('remove_from_attachment_list', $uploadid);
 }
 
 // send html page with JS calls as response
-$OUTPUT->command('show_attachment_form', false);
 $OUTPUT->command('auto_save_start', false);
 $OUTPUT->send('iframe');
 

program/steps/mail/compose.inc

@@ -94,7 +94,7 @@ if (!is_array($_SESSION['compose']) || $_SESSION['compose']['id'] != get_input_v
 // add some labels to client
 $OUTPUT->add_label('nosubject', 'nosenderwarning', 'norecipientwarning', 'nosubjectwarning',
     'nobodywarning', 'notsentwarning', 'savingmessage', 'sendingmessage', 'messagesaved',
-    'converting', 'editorwarning', 'searching');
+    'converting', 'editorwarning', 'searching', 'uploading', 'fileuploaderror');
 
 // add config parameters to client script
 if (!empty($CONFIG['drafts_mbox'])) {
@@ -809,6 +809,8 @@ function rcmail_compose_attachment_list($attrib)
 
   if ($attrib['deleteicon'])
     $_SESSION['compose']['deleteicon'] = $CONFIG['skin_path'] . $attrib['deleteicon'];
+  if ($attrib['loadingicon'])
+    $OUTPUT->set_env('loadingicon', $CONFIG['skin_path'] . $attrib['loadingicon']);
 
   $OUTPUT->add_gui_object('attachmentlist', $attrib['id']);
     

skins/default/mail.css

@@ -1238,7 +1238,7 @@ div.message-htmlpart div.rcmBody
   position: absolute;
   top: 100px;
   left: 20px;
-  width: 170px;
+  width: 175px;
 }
 
 #compose-attachments ul

skins/default/templates/compose.html

@@ -93,7 +93,7 @@
 
 <div id="compose-attachments">
 <div id="attachment-title"><roundcube:label name="attachments" /></div>
-<roundcube:object name="composeAttachmentList" deleteIcon="/images/icons/delete.png" />
+<roundcube:object name="composeAttachmentList" deleteIcon="/images/icons/delete.png" loadingIcon="/images/display/loading_blue.gif" />
 <p><roundcube:button command="add-attachment" imagePas="/images/buttons/add_pas.png" imageSel="/images/buttons/add_sel.png" imageAct="/images/buttons/add_act.png" width="23" height="18" title="addattachment" /></p>
 </div>