Changeset 0be8bd1 in github

Timestamp:

Jun 26, 2012 5:49:47 AM (11 months ago)

Author:

Thomas Bruederli <thomas@…>

Branches:

master, HEAD

Children:

d901205

Parents:

7ab9c17

Message:

Enable drag & drop file upload for contact photos

Files:

• program/js/app.js (modified) (10 diffs)
• program/steps/addressbook/edit.inc (modified) (2 diffs)
• skins/larry/addressbook.css (modified) (1 diff)
• skins/larry/templates/contactedit.html (modified) (1 diff)

program/js/app.js

@@ -4716 +4716 @@
     if (form && form.elements._photo.value) {
       this.async_upload_form(form, 'upload-photo', function(e) {
-        rcmail.set_busy(false, null, rcmail.photo_upload_id);
+        rcmail.set_busy(false, null, rcmail.file_upload_id);
       });
 
       // display upload indicator
-      this.photo_upload_id = this.set_busy(true, 'uploading');
+      this.file_upload_id = this.set_busy(true, 'uploading');
     }
   };
@@ -4735 +4735 @@
   this.photo_upload_end = function()
   {
-    this.set_busy(false, null, this.photo_upload_id);
-    delete this.photo_upload_id;
+    this.set_busy(false, null, this.file_upload_id);
+    delete this.file_upload_id;
   };
 
@@ -6255 +6255 @@
     var files = e.target.files || e.dataTransfer.files,
       formdata = window.FormData ? new FormData() : null,
-      fieldname = this.env.filedrop.fieldname || '_file',
+      fieldname = (this.env.filedrop.fieldname || '_file') + (this.env.filedrop.single ? '' : '[]'),
       boundary = '------multipartformboundary' + (new Date).getTime(),
       dashdash = '--', crlf = '\r\n',
@@ -6270 +6270 @@
 
       // add to attachments list
-      ref.add2attachment_list(ts, { name:'', html:content, classname:'uploading', complete:false });
+      if (!ref.add2attachment_list(ts, { name:'', html:content, classname:'uploading', complete:false }))
+        ref.file_upload_id = ref.set_busy(true, 'uploading');
 
       // complete multipart content and post request
@@ -6278 +6279 @@
         type: 'POST',
         dataType: 'json',
-        url: ref.url(ref.env.filedrop.action||'upload', { _id:ref.env.compose_id||'', _uploadid:ts, _remote:1 }),
+        url: ref.url(ref.env.filedrop.action||'upload', { _id:ref.env.compose_id||ref.env.cid||'', _uploadid:ts, _remote:1 }),
         contentType: formdata ? false : 'multipart/form-data; boundary=' + boundary,
         processData: false,
@@ -6290 +6291 @@
     // get contents of all dropped files
     var last = this.env.filedrop.single ? 0 : files.length - 1;
-    for (var i=0, f; i <= last && (f = files[i]); i++) {
+    for (var j=0, i=0, f; j <= last && (f = files[i]); i++) {
       if (!f.name) f.name = f.fileName;
       if (!f.size) f.size = f.fileSize;
@@ -6307 +6308 @@
       // do it the easy way with FormData (FF 4+, Chrome 5+, Safari 5+)
       if (formdata) {
-        formdata.append(fieldname + '[]', f);
-        if (i == last)
+        formdata.append(fieldname, f);
+        if (j == last)
           return submit_data();
       }
@@ -6316 +6317 @@
 
         // closure to pass file properties to async callback function
-        reader.onload = (function(file, i) {
+        reader.onload = (function(file, j) {
           return function(e) {
-            multipart += 'Content-Disposition: form-data; name="' + fieldname + '[]"';
+            multipart += 'Content-Disposition: form-data; name="' + fieldname + '"';
             multipart += '; filename="' + (f.name_bin || file.name) + '"' + crlf;
             multipart += 'Content-Length: ' + file.size + crlf;
@@ -6325 +6326 @@
             multipart += dashdash + boundary + crlf;
 
-            if (i == last)  // we're done, submit the data
+            if (j == last)  // we're done, submit the data
               return submit_data();
           }
-        })(f,i);
+        })(f,j);
         reader.readAsBinaryString(f);
       }
       // Firefox 3
       else if (f.getAsBinary) {
-        multipart += 'Content-Disposition: form-data; name="' + fieldname + '[]"';
+        multipart += 'Content-Disposition: form-data; name="' + fieldname + '"';
         multipart += '; filename="' + (f.name_bin || f.name) + '"' + crlf;
         multipart += 'Content-Length: ' + f.size + crlf;
@@ -6340 +6341 @@
         multipart += dashdash + boundary +crlf;
 
-        if (i == last)
+        if (j == last)
           return submit_data();
       }
+
+      j++;
     }
   };

program/steps/addressbook/edit.inc

@@ -263 +263 @@
 
 
+/**
+ * Register container as active area to drop photos onto
+ */
+function rcmail_photo_drop_area($attrib)
+{
+    global $OUTPUT;
+
+    if ($attrib['id']) {
+        $OUTPUT->add_gui_object('filedrop', $attrib['id']);
+        $OUTPUT->set_env('filedrop', array('action' => 'upload-photo', 'fieldname' => '_photo', 'single' => 1, 'filter' => '^image/.+'));
+    }
+}
+
+
 $OUTPUT->add_handlers(array(
     'contactedithead' => 'rcmail_contact_edithead',
@@ -269 +283 @@
     'photouploadform' => 'rcmail_upload_photo_form',
     'sourceselector'  => 'rcmail_source_selector',
+    'filedroparea'    => 'rcmail_photo_drop_area',
 ));
 

skins/larry/addressbook.css

@@ -161 +161 @@
 #contactpic img {
         width: 112px;
+        visibility: inherit;
+}
+
+#contactpic.droptarget {
+        background-image: url(images/filedrop.png);
+        background-position: center;
+        background-repeat: no-repeat;
+}
+
+#contactpic.droptarget.hover {
+        background-color: #d9ecf4;
+        box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
+        -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
+        -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
+        -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
+}
+
+#contactpic.droptarget.active img {
+        opacity: 0.15;
+}
+
+#contactpic.droptarget.hover img {
+        opacity: 0.05;
 }
 

skins/larry/templates/contactedit.html

@@ -20 +20 @@
                 <roundcube:object name="contactphoto" id="contactpic" placeholder="/images/contactpic.png" />
                 <roundcube:if condition="env:photocol" />
+                <roundcube:object name="fileDropArea" id="contactpic" />
                 <div class="formlinks">
                         <roundcube:button command="upload-photo" id="uploadformlink" type="link" label="replacephoto" class="iconlink upload disabled" classAct="iconlink upload active" onclick="UI.show_uploadform();return false" condition="env:photocol" /><br/>