first pass at implementing image preview before sending

src/views/messages-view.jsx

@@ -75,6 +75,8 @@ class MessagesView extends React.Component {
     this.handleShowContextMenuMessage = this.handleShowContextMenuMessage.bind(this);
     this.handleNewChatAcceptance = this.handleNewChatAcceptance.bind(this);
     this.handleEnablePeer = this.handleEnablePeer.bind(this);
+    this.handleAttachFile = this.handleAttachFile.bind(this);
+    this.handleAttachImage = this.handleAttachImage.bind(this);
   }
 
   componentDidMount() {
@@ -492,6 +494,21 @@ class MessagesView extends React.Component {
     this.props.onChangePermissions(this.state.topic, DEFAULT_P2P_ACCESS_MODE, this.state.topic);
   }
 
+  handleAttachFile(mime, bits, fname, size, uploadCompletionPromise, uploader) {
+    if (uploadCompletionPromise) {
+      // Format data and initiate upload.
+      const msg = Drafty.attachFile(null, mime, null, fname, size, uploadCompletionPromise);
+      // Pass data and the uploader to the TinodeWeb.
+      this.props.sendMessage(msg, uploadCompletionPromise, uploader);
+    } else {
+      this.props.sendMessage(Drafty.attachFile(null, mime, bits, fname));
+    }
+  }
+
+  handleAttachImage(mime, bits, width, height, fname) {
+    this.props.sendMessage(Drafty.insertImage(null, 0, mime, bits, width, height, fname));
+  }
+
   render() {
     const {formatMessage} = this.props.intl;
 
@@ -643,10 +660,13 @@ class MessagesView extends React.Component {
               tinode={this.props.tinode}
               topic={this.props.topic}
               disabled={!this.state.isWriter}
-              sendMessage={this.props.sendMessage}
+              onSendMessage={this.props.sendMessage}
+              onAttachFile={this.handleAttachFile}
+              onAttachImage={this.handleAttachImage}
               onError={this.props.onError} />}
           {this.state.imagePreview ?
             <ImagePreview content={this.state.imagePreview}
+              downloadable={true}
               onClose={this.handleCloseImagePreview} /> : null}
         </div>
       );

src/widgets/image-preview.jsx

@@ -48,10 +48,13 @@ export default class ImagePreview extends React.PureComponent {
     return (
       <div id="image-preview" onClick={this.props.onClose}>
         <div id="image-preview-caption-panel">
-          <a href={this.props.content.url} download={this.props.content.filename}>
-            <i className="material-icons">file_download</i> <FormattedMessage
-              id="download_action" defaultMessage="download" description="Call to action [download]" />
-          </a>
+          {this.props.downloadable ?
+            <a href={this.props.content.url} download={this.props.content.filename}>
+              <i className="material-icons">file_download</i> <FormattedMessage
+                id="download_action" defaultMessage="download" description="Call to action [download]" />
+            </a>
+            :
+            null}
           <a href="#" onClick={(e) => {e.preventDefault(); this.props.onClose();}}><i className="material-icons gray">close</i></a>
         </div>
         <div id="image-preview-container" ref={(node) => this.assignWidth(node)}>

src/widgets/send-message.jsx

@@ -67,11 +67,10 @@ class SendMessage extends React.PureComponent {
     // FIXME: handle large files too.
     if (filePasted(e,
       (bits, mime, width, height, fname) => {
-        this.props.sendMessage(Drafty.insertImage(null,
-          0, mime, bits, width, height, fname));
+        this.props.onAttachImage(mime, bits, width, height, fname);
       },
       (mime, bits, fname) => {
-        this.props.sendMessage(Drafty.attachFile(null, mime, bits, fname));
+        this.props.onAttachFile(mime, bits, fname);
       },
       this.props.onError)) {
 
@@ -89,8 +88,7 @@ class SendMessage extends React.PureComponent {
         imageFileScaledToBase64(file, MAX_IMAGE_DIM, MAX_IMAGE_DIM, false,
           // Success
           (bits, mime, width, height, fname) => {
-            this.props.sendMessage(Drafty.insertImage(null,
-              0, mime, bits, width, height, fname));
+            this.props.onAttachImage(mime, bits, width, height, fname);
           },
           // Failure
           (err) => {
@@ -101,8 +99,7 @@ class SendMessage extends React.PureComponent {
         imageFileToBase64(file,
           // Success
           (bits, mime, width, height, fname) => {
-            this.props.sendMessage(Drafty.insertImage(null,
-              0, mime, bits, width, height, fname));
+            this.props.onAttachImage(mime, bits, width, height, fname);
           },
           // Failure
           (err) => {
@@ -130,16 +127,13 @@ class SendMessage extends React.PureComponent {
           this.props.onError(formatMessage(messages.cannot_initiate_upload));
           return;
         }
-        // Format data and initiate upload.
-        const uploadCompletionPromise = uploader.upload(file);
-        const msg = Drafty.attachFile(null, file.type, null, file.name, file.size, uploadCompletionPromise);
         // Pass data and the uploader to the TinodeWeb.
-        this.props.sendMessage(msg, uploadCompletionPromise, uploader);
+        this.props.onAttachFile(file.type, null, file.name, file.size, uploadCompletionPromise, uploader);
       } else {
         // Small enough to send inband.
         fileToBase64(file,
           (mime, bits, fname) => {
-            this.props.sendMessage(Drafty.attachFile(null, mime, bits, fname));
+            this.props.onAttachFile(mime, bits, fname);
           },
           this.props.onError
         );
@@ -153,7 +147,7 @@ class SendMessage extends React.PureComponent {
     e.preventDefault();
     const message = this.state.message.trim();
     if (message) {
-      this.props.sendMessage(this.state.message.trim());
+      this.props.onSendMessage(this.state.message.trim());
       this.setState({message: ''});
     }
   }