done

src/widgets/doc-preview.jsx

@@ -21,15 +21,13 @@ export default class DocPreview extends React.PureComponent {
 
   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);
+    this.props.onSendMessage(this.props.content.file);
   }
 
   render() {
     if (!this.props.content) {
       return null;
     }
-    const doc = iconFromMime(this.props.content.type);
     return (
       <div id="image-preview">
         <div id="image-preview-caption-panel">
@@ -37,24 +35,15 @@ export default class DocPreview extends React.PureComponent {
           <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" /></b></div>
-            <div>{this.props.content.type}</div>
-          </div>
-          <div>
-            <div><b><FormattedMessage id="label_size" /></b></div>
-            <div>{bytesToHumanSize(this.props.content.size)}</div>
+          <div className="flex-column narrow">
+            <i className="material-icons gray">{iconFromMime(this.props.content.type)}</i>
+            <div><b><FormattedMessage id="label_content_type" /></b> {this.props.content.type || 'application/octet-stream'}</div>
+            <div><b><FormattedMessage id="label_size" /></b> {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}
+          noInput={true}
+          onSendMessage={this.handleSendDoc}
           onError={this.props.onError} />
       </div>
     );

src/widgets/image-preview.jsx

@@ -72,8 +72,6 @@ export default class ImagePreview extends React.PureComponent {
         </div>
         {this.props.onSendMessage ?
           <SendMessage
-            tinode={this.props.tinode}
-            topic={this.props.topic}
             messagePrompt="add_image_caption"
             acceptBlank={true}
             onSendMessage={this.handleSendImage}

src/widgets/send-message.jsx

@@ -53,15 +53,21 @@ class SendMessage extends React.PureComponent {
   }
 
   componentDidMount() {
-    this.messageEditArea.addEventListener('paste', this.handlePasteEvent, false);
+    if (this.messageEditArea) {
+      this.messageEditArea.addEventListener('paste', this.handlePasteEvent, false);
+    }
   }
 
   componentWillUnmount() {
-    this.messageEditArea.removeEventListener('paste', this.handlePasteEvent, false);
+    if (this.messageEditArea) {
+      this.messageEditArea.removeEventListener('paste', this.handlePasteEvent, false);
+    }
   }
 
   componentDidUpdate() {
-    this.messageEditArea.focus();
+    if (this.messageEditArea) {
+      this.messageEditArea.focus();
+    }
   }
 
   handlePasteEvent(e) {
@@ -103,7 +109,7 @@ class SendMessage extends React.PureComponent {
   handleSend(e) {
     e.preventDefault();
     const message = this.state.message.trim();
-    if (message || this.props.acceptBlank) {
+    if (message || this.props.acceptBlank || this.props.noInput) {
       this.props.onSendMessage(message);
       this.setState({message: ''});
     }
@@ -161,20 +167,22 @@ class SendMessage extends React.PureComponent {
             </>)
           :
           null}
-        <textarea id="sendMessage" placeholder={prompt}
-          disabled={this.props.disabled} value={this.state.message}
-          onChange={this.handleMessageTyping} onKeyPress={this.handleKeyPress}
-          ref={(ref) => {this.messageEditArea = ref;}}
-          autoFocus />
-          {this.props.disabled ?
-            <i className="material-icons disabled">send</i> :
-            <a href="#" onClick={this.handleSend} title="Send">
-              <i className="material-icons">send</i>
-            </a>}
-      <input type="file" ref={(ref) => {this.attachFile = ref;}}
-        onChange={this.handleAttachFile} style={{display: 'none'}} />
-      <input type="file" ref={(ref) => {this.attachImage = ref;}} accept="image/*"
-        onChange={this.handleAttachImage} style={{display: 'none'}} />
+        {this.props.noInput ?
+          <div className="hr thin" /> :
+          <textarea id="sendMessage" placeholder={prompt}
+            disabled={this.props.disabled} value={this.state.message}
+            onChange={this.handleMessageTyping} onKeyPress={this.handleKeyPress}
+            ref={(ref) => {this.messageEditArea = ref;}}
+            autoFocus />}
+        {this.props.disabled ?
+          <i className="material-icons disabled">send</i> :
+          <a href="#" onClick={this.handleSend} title="Send">
+            <i className="material-icons">send</i>
+          </a>}
+        <input type="file" ref={(ref) => {this.attachFile = ref;}}
+          onChange={this.handleAttachFile} style={{display: 'none'}} />
+        <input type="file" ref={(ref) => {this.attachImage = ref;}} accept="image/*"
+          onChange={this.handleAttachImage} style={{display: 'none'}} />
       </div>
     );
   }