update Drafty for external attachmanes, update UI

css/base.css

@@ -1225,7 +1225,7 @@ i.search {
   display: flex;
 }
 .attachment:last-of-type {
-  margin-bottom: -1rem;
+  margin-bottom: -0.45rem;
 }
 
 /* END of talk bubbles */
@@ -1711,7 +1711,7 @@ ul.tabbar li.active > a:after {
   position: relative;
   height: 0.6rem;
   padding: 0.15rem;
-  margin: 0.3rem;
+  margin: 0.35rem;
   width: 6rem;
   border-radius: 0.1rem;
   background-color: silver;

drafty.js

@@ -129,9 +129,10 @@ Sample JSON representation of the text above:
     },
     IM: {
       open: function(data) {
-        var blobUrl = base64toObjectUrl(data.val, data.mime);
+        var previewUrl = data.val ? base64toObjectUrl(data.val, data.mime) : data.ref;
-        var res = (data.name ? '<a href="' + blobUrl + '" download="' + data.name + '">' : '') +
+        var downloadUrl = data.ref ? data.ref : previewUrl;
-          '<img src="' + blobUrl + '"' +
+        var res = (data.name ? '<a href="' + downloadUrl + '" download="' + data.name + '">' : '') +
+          '<img src="' + previewUrl + '"' +
             (data.width ? ' width="' + data.width + '"' : '') +
             (data.height ? ' height="' + data.height + '"' : '') + ' border="0" />';
         console.log("open: " + res);
@@ -497,12 +498,14 @@ Sample JSON representation of the text above:
        * @param {Drafty} content object to add image to.
        * @param {integer} at index where the object is inserted. The length of the image is always 1.
        * @param {string} mime mime-type of the image, e.g. "image/png"
-       * @param {string} base64bits base64-encoded image content
+       * @param {string} base64bits base64-encoded image content (or preview, if large image is attached)
        * @param {integer} width width of the image
        * @param {integer} height height of the image
        * @param {string} fname file name suggestion for downloading the image.
+       * @param {string} refurl reference to the content. Could be null or undefined.
+       * @param {integer} size size of the external file. Treat is as an untrusted hint.
        */
-      insertImage: function(content, at, mime, base64bits, width, height, fname) {
+      insertImage: function(content, at, mime, base64bits, width, height, fname, refurl, size) {
         content = content || {txt: " "};
         content.ent = content.ent || [];
         content.fmt = content.fmt || [];
@@ -519,7 +522,9 @@ Sample JSON representation of the text above:
             val: base64bits,
             width: width,
             height: height,
-            name: fname
+            name: fname,
+            ref: refurl,
+            size: size | 0
           }
         });
 
@@ -527,14 +532,16 @@ Sample JSON representation of the text above:
       },
 
       /**
-       * Add file to Drafty content.
+       * Add file to Drafty content. Either as a blob or as a reference.
        *
-       * @param {Drafty} content object to add image to.
+       * @param {Drafty} content object to attach file to.
-       * @param {string} mime mime-type of the image, e.g. "image/png"
+       * @param {string} mime mime-type of the file, e.g. "image/png"
-       * @param {string} base64bits base64-encoded image content
+       * @param {string} base64bits base64-encoded file content
-       * @param {string} fname file name suggestion for downloading the image.
+       * @param {string} fname file name suggestion for downloading.
+       * @param {string} refurl reference to the content. Could be null or undefined.
+       * @param {integer} size size of the external file. Treat is as an untrusted hint.
        */
-      attachFile: function(content, mime, base64bits, fname) {
+      attachFile: function(content, mime, base64bits, fname, refurl, size) {
         content = content || {txt: ""};
         content.ent = content.ent || [];
         content.fmt = content.fmt || [];
@@ -550,7 +557,9 @@ Sample JSON representation of the text above:
           data: {
             mime: mime,
             val: base64bits,
-            name: fname
+            name: fname,
+            ref: refurl,
+            size: size | 0
           }
         });
 
@@ -567,7 +576,7 @@ Sample JSON representation of the text above:
        *
        * @return HTML-representation of content.
        */
-      unsafeToHTML: function(content) {
+      UNSAFE_toHTML: function(content) {
         var {txt, fmt, ent} = content;
 
         var markup = [];
@@ -742,8 +751,9 @@ Sample JSON representation of the text above:
        * @param {Object} entity to get the size for.
        */
       getEntitySize: function(entity) {
-        // Value is base64 encoded. The actual object size is smaller than the encoded length.
+        // Either size hint or length of value. The value is base64 encoded,
-        return entity.val ? (entity.val.length * 0.75) | 0 : 0;
+        // the actual object size is smaller than the encoded length.
+        return entity.size ? entity.size : entity.val ? (entity.val.length * 0.75) | 0 : 0;
       },
 
       /**

index.html

@@ -1561,7 +1561,6 @@
                 onError={this.props.onError} /> :
 
               null}
-              <FileUploadProgress />
           </div>
         );
       }
@@ -3178,7 +3177,7 @@
           Drafty.attachments(content, function(att, i) {
             attachments.push(<Message.Attachment
               filename={att.name} blobUrl={Drafty.getBlobUrl(att)}
-              size={bytesToHumanSize(Drafty.getEntitySize(att))} key={i} />);
+              size={Drafty.getEntitySize(att)} key={i} />);
           }, this);
           content = React.createElement('span', null, Drafty.format(content, formatter, this));
         }
@@ -3213,6 +3212,34 @@
       }
     });
 
+    var MessageUploader = React.createClass({
+      render: function() {
+        var sideClass = this.props.sequence + " right";
+        var bubbleClass = "bubble tip";
+
+        var attachments = [
+          <Message.Attachment
+            filename={this.props.filename} size={this.props.size}
+            uploader={true}
+            progress={this.props.progress}/>
+        ];
+
+        return (
+          <li className={sideClass}>
+            <div>
+              <div className="bubble tip">
+                <p>{attachments}
+                <Message.ReceivedMarker response={this.props.response}
+                  timestamp={this.props.timestamp} received={this.props.received} />
+                </p>
+              </div>
+            </div>
+          </li>
+        );
+      }
+    });
+
+
     /* Received/read indicator */
     Message.ReceivedMarker = React.createClass({
       render: function() {
@@ -3245,14 +3272,21 @@
         if (filename.length > 36) {
           filename = filename.substr(0, 16) + "..." + filename.substr(-16);
         }
+        var size = this.props.size > 0 ?
+          <span className="small gray">({bytesToHumanSize(this.props.size)})</span> :
+          null;
         return (
           <div className="attachment">
             <div><i className="material-icons big gray">insert_drive_file</i></div>
             <div className="flex-column">
-              <div>{filename} <span className="small gray">({this.props.size})</span></div>
+              <div>{filename} {size}</div>
-              <div><a href={this.props.blobUrl} download={this.props.filename}>
+              {this.props.uploader ?
-                <i className="material-icons">file_download</i> save
+                <FileUploadProgress progress={this.props.progress} />
-              </a></div>
+                :
+                <div><a href={this.props.blobUrl} download={this.props.filename}>
+                  <i className="material-icons">file_download</i> save
+                </a></div>
+              }
             </div>
           </div>
         );
@@ -3263,6 +3297,7 @@
       getInitialState: function() {
         return {
           messages: [],
+          uploadFile: "test_upload_file.pdf",
           onlineSubs: [],
           topic: '',
           title: '',
@@ -3550,7 +3585,12 @@
           var previousFrom = null;
           for (var i=0; i<this.state.messages.length; i++) {
             var msg = this.state.messages[i];
-            var nextFrom = (i + 1 < this.state.messages.length) ? this.state.messages[i+1].from : null;
+            var nextFrom = null;
+            if (i + 1 < this.state.messages.length) {
+              nextFrom = this.state.messages[i+1].from
+            } else if (this.state.uploadFile) {
+              nextFrom = this.props.myUserId;
+            }
             var sequence = "single";
             if (msg.from === previousFrom) {
               if (msg.from === nextFrom) {
@@ -3598,6 +3638,18 @@
             );
           }
 
+          // Upload in progress: display it as an unsent message.
+          if (this.state.uploadFile) {
+            var sequence = (this.state.messages.length > 0 &&
+              this.state.messages[this.state.messages.length-1].from === this.props.myUserId) ? "last" : "single";
+            messageNodes.push(
+              <MessageUploader filename={this.state.uploadFile}
+                size={123456} sequence={sequence} received={Received.SENDING}
+                viewportWidth={this.props.viewportWidth}
+                key="uploader" />
+            );
+          }
+
           var lastSeen = null;
           var cont = Tinode.getMeTopic().getContact(this.state.topic);
           if (cont && Tinode.getTopicType(cont.topic) === "p2p") {