first pass at file attachment previews

src/widgets/doc-preview.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import SendMessage from '../widgets/send-message.jsx';
+
+import { bytesToHumanSize } from '../lib/strformat.js';
+
+// Get material icon name from mime type.
+function iconFromMime(mime) {
+  // If more icons become available in material icons, add them to this mime-to-icon mapping.
+  const mimeToIcon = {default: 'insert_drive_file', image: 'image', text: 'description', video: 'theaters'};
+
+  return mimeToIcon[mime] || mimeToIcon[(mime || '').split('/')[0]] || mimeToIcon['default'];
+}
+
+export default class DocPreview extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleSendDoc = this.handleSendDoc.bind(this);
+  }
+
+  handleSendDoc(caption) {
+    this.props.onClose();
+    this.props.onSendMessage(caption, this.props.content.type, this.props.content.bits,
+      this.props.content.width, this.props.content.height, this.props.content.filename);
+  }
+
+  render() {
+    if (!this.props.content) {
+      return null;
+    }
+
+    return (
+      const doc = iconFromMime(this.props.content.type);
+      <div id="image-preview">
+        <div id="image-preview-caption-panel">
+          <span>{this.props.content.filename}</span>
+          <a href="#" onClick={(e) => {e.preventDefault(); this.props.onClose();}}><i className="material-icons gray">close</i></a>
+        </div>
+        <div id="image-preview-container">
+          <i className="material-icons gray">{doc}</i>
+        </div>
+        <div id="image-preview-footer">
+          <div>
+            <div><b><FormattedMessage id="label_content_type" defaultMessage="Content type:"
+              description="Label for file content type (mime)" /></b></div>
+            <div>{this.props.content.type}</div>
+          </div>
+          <div>
+            <div><b><FormattedMessage id="label_size" defaultMessage="Size:"
+              description="Label for file size" /></b></div>
+            <div>{bytesToHumanSize(this.props.content.size)}</div>
+          </div>
+        </div>
+        <SendMessage
+          tinode={this.props.tinode}
+          topic={this.props.topic}
+          messagePrompt="add_image_caption"
+          acceptBlank={true}
+          onSendMessage={this.handleSendImage}
+          onError={this.props.onError} />
+      </div>
+    );
+  }
+};

src/widgets/image-preview.jsx

@@ -50,7 +50,7 @@ export default class ImagePreview extends React.PureComponent {
     // Averate font aspect ratio is ~0.5; File name takes 1/3 of the viewport width.
     const maxlength = Math.max(((this.state.width / REM_SIZE / 1.5) | 0) - 2, 12);
     if (filename.length > maxlength) {
-      filename = filename.slice(0, maxlength/2 - 1) + '...' + filename.slice(1 - maxlength/2);
+      filename = filename.slice(0, maxlength/2 - 1) + '…' + filename.slice(1 - maxlength/2);
     }
     const width = this.props.content.width || '-';
     const height = this.props.content.height || '-';