implement file attachments feature

sebsauvage · vikstrous · Feb 8, 2013 · Feb 8, 2013 · ff7bade820e1f6e24378a32c435bbb508d21a7bb
commit ff7bade820e1f6e24378a32c435bbb508d21a7bb
diff --git a/css/zerobin.css b/css/zerobin.css
@@ -25,7 +25,7 @@ margin-bottom:15px;
 padding-left:60px; padding-right:60px;
 }
 
-a  { color:#0F388F; }
+a  { color:#0F388F; cursor:pointer; }
 
 h1 {
 font-size:3.5em;
@@ -74,7 +74,7 @@ width:60%;
 
 div#aboutbox a { color: #94a3b4; }
 
-textarea#message,div#cleartext,.replymessage {
+textarea#message,div#cleartext,.replymessage,div#attachment {
 clear:both;
 color:black;
 background-color:#fff;

diff --git a/index.php b/index.php
@@ -141,12 +141,21 @@ function deletePaste($pasteid)
 
     // Make sure content is not too big.
     $data = $_POST['data'];
+    $has_attachment = array_key_exists('attachment', $_POST);
+    if($has_attachment)
+        $attachment = $_POST['attachment'];
     if (strlen($data)>2000000)
         { echo json_encode(array('status'=>1,'message'=>'Paste is limited to 2 Mb of encrypted data.')); exit; }
+    if($has_attachment)
+        if (strlen($attachment)>2000000)
+            { echo json_encode(array('status'=>1,'message'=>'Paste is limited to 2 Mb of encrypted data.')); exit; }
 
     // Make sure format is correct.
     if (!validSJCL($data))
         { echo json_encode(array('status'=>1,'message'=>'Invalid data.')); exit; }
+    if($has_attachment)
+        if (!validSJCL($attachment))
+            { echo json_encode(array('status'=>1,'message'=>'Invalid data.')); exit; }
 
     // Read additional meta-information.
     $meta=array();
@@ -210,7 +219,10 @@ function deletePaste($pasteid)
     $dataid = substr(hash('md5',$data),0,16);
 
     $is_comment = (!empty($_POST['parentid']) && !empty($_POST['pasteid'])); // Is this post a comment ?
+
     $storage = array('data'=>$data);
+    if($has_attachment)
+        $storage['attachment'] = $attachment;
     if (count($meta)>0) $storage['meta'] = $meta;  // Add meta-information only if necessary.
 
     if ($is_comment) // The user posts a comment.
@@ -328,7 +340,6 @@ function deletePaste($pasteid)
     }
 }
 
-
 require_once "lib/rain.tpl.class.php";
 header('Content-Type: text/html; charset=utf-8');
 $page = new RainTPL;

diff --git a/js/zerobin.js b/js/zerobin.js
@@ -105,14 +105,24 @@ function setElementText(element, text) {
  * @param array comments : Array of messages to display (items = array with keys ('data','meta')
  */
 function displayMessages(key, comments) {
+    var attachment;
     try { // Try to decrypt the paste.
         var cleartext = zeroDecipher(key, comments[0].data);
+        if(comments[0].attachment) {
+            attachment = zeroDecipher(key, comments[0].attachment);
+        }
     } catch(err) {
         $('div#cleartext').hide();
         $('button#clonebutton').hide();
         showError('Could not decrypt data (Wrong key ?)');
         return;
     }
+
+    if(attachment) {
+        $('div#attachment').show();
+        $('div#attachment a').attr('href', attachment);
+    }
+
     setElementText($('div#cleartext'), cleartext);
     urls2links($('div#cleartext')); // Convert URLs to clickable links.
 
@@ -231,48 +241,80 @@ function send_comment(parentid) {
         });
     }
 
+function remove_attachment() {
+    $('#cloned-file').hide();
+    $('#attachment a').attr('href', ''); // removes the saved decrypted file data
+    $('#file-wrap').html($('#file-wrap').html()); // the only way to deselect the file is to recreate the input
+    $('#file-wrap').show();
+}
+
 /**
  *  Send a new paste to server
  */
 function send_data() {
     // Do not send if no data.
-    if ($('textarea#message').val().length == 0) {
+    var files = document.getElementById('file').files; // FileList object
+    if ($('textarea#message').val().length == 0 && !(files && files[0])) {
         return;
     }
     showStatus('Sending paste...', spin=true);
     var randomkey = sjcl.codec.base64.fromBits(sjcl.random.randomWords(8, 0), 0);
-    var cipherdata = zeroCipher(randomkey, $('textarea#message').val());
-    var data_to_send = { data:           cipherdata,
-                         expire:         $('select#pasteExpiration').val(),
-                         opendiscussion: $('input#opendiscussion').is(':checked') ? 1 : 0
-                       };
-    $.post(scriptLocation(), data_to_send, 'json')
-        .error(function() {
-            showError('Data could not be sent (serveur error or not responding).');
-        })
-        .success(function(data) {
-            if (data.status == 0) {
-                stateExistingPaste();
-                var url = scriptLocation() + "?" + data.id + '#' + randomkey;
-                showStatus('');
-                $('div#pastelink').html('Your paste is <a href="' + url + '">' + url + '</a>').show();
-                setElementText($('div#cleartext'), $('textarea#message').val());
-                urls2links($('div#cleartext'));
-                showStatus('');
-            }
-            else if (data.status==1) {
-                showError('Could not create paste: '+data.message);
-            }
-            else {
-                showError('Could not create paste.');
-            }
-        });
+
+    var cipherdata_attachment;
+    if(files && files[0]){
+      var reader = new FileReader();
+      // Closure to capture the file information.
+      reader.onload = (function(theFile) {
+        return function(e) {
+          cipherdata_attachment = zeroCipher(randomkey, e.target.result);
+          the_rest();
+        };
+      })(files[0]);
+      reader.readAsDataURL(files[0]);
+    } else if($('div#attachment a').attr('href')) {
+        cipherdata_attachment = zeroCipher(randomkey, $('div#attachment a').attr('href'));
+        the_rest();
+    } else {
+        the_rest();
+    }
+    function the_rest() {
+        var cipherdata = zeroCipher(randomkey, $('textarea#message').val());
+
+        var data_to_send = { data:           cipherdata,
+                             attachment:     cipherdata_attachment,
+                             expire:         $('select#pasteExpiration').val(),
+                             opendiscussion: $('input#opendiscussion').is(':checked') ? 1 : 0
+                           };
+        $.post(scriptLocation(), data_to_send, 'json')
+            .error(function() {
+                showError('Data could not be sent (serveur error or not responding).');
+            })
+            .success(function(data) {
+                if (data.status == 0) {
+                    stateExistingPaste();
+                    var url = scriptLocation() + "?" + data.id + '#' + randomkey;
+                    showStatus('');
+                    $('div#pastelink').html('Your paste is <a href="' + url + '">' + url + '</a>').show();
+                    setElementText($('div#cleartext'), $('textarea#message').val());
+                    urls2links($('div#cleartext'));
+                    showStatus('');
+                }
+                else if (data.status==1) {
+                    showError('Could not create paste: '+data.message);
+                }
+                else {
+                    showError('Could not create paste.');
+                }
+            });
+    }
 }
 
 /**
  * Put the screen in "New paste" mode.
  */
 function stateNewPaste() {
+    $('div#attach').show();
+    $('div#attachment').hide();
     $('button#sendbutton').show();
     $('button#clonebutton').hide();
     $('div#expiration').show();
@@ -303,6 +345,8 @@ function stateExistingPaste() {
         $('button#clonebutton').show();
     }
 
+    $('div#attach').hide();
+    $('div#attachment').hide();
     $('div#expiration').hide();
     $('div#language').hide();
     $('input#password').hide();
@@ -319,6 +363,10 @@ function stateExistingPaste() {
 function clonePaste() {
     stateNewPaste();
     showStatus('');
+    if($('#attachment a').attr('href')){
+        $('#cloned-file').show();
+        $('#file-wrap').hide();
+    }
     $('textarea#message').text($('div#cleartext').text());
 }
 

diff --git a/tpl/page.html b/tpl/page.html
@@ -70,7 +70,9 @@ <h3>{$VERSION}</h3>
         </div>
     </div>
     <div id="pastelink" style="display:none;"></div>
+    <div id="attachment" style="display:none;"><a>Download attachment</a></div>
     <div id="cleartext" style="display:none;"></div>
+    <div id="attach" style="display:none;"><span id="cloned-file" style="display:none;">Cloned file attached.</span><span id="file-wrap">Attach a file: <input type="file" id="file" name="file" /></span> <button onclick="remove_attachment()">remove attachment</button></div>
     <textarea id="message" name="message" cols="80" rows="25" style="display:none;"></textarea>
     <div id="discussion" style="display:none;">
         <h4>Discussion</h4>