wip: out of band inline images are starting to work

src/widgets/avatar-upload.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 import LetterTile from './letter-tile.jsx';
 
-import { AVATAR_SIZE } from '../config.js';
-import { imageFileScaledToBase64, makeImageUrl } from '../lib/blob-helpers.js';
+import { AVATAR_SIZE, MAX_EXTERN_ATTACHMENT_SIZE } from '../config.js';
+import { imageScaled, blobToBase64, makeImageUrl } from '../lib/blob-helpers.js';
 
 export default class AvatarUpload extends React.Component {
   constructor(props) {
@@ -23,12 +23,15 @@ export default class AvatarUpload extends React.Component {
   }
 
   handleFileUpload(e) {
-    imageFileScaledToBase64(e.target.files[0], AVATAR_SIZE, AVATAR_SIZE, true,
-      // Success
-      (base64bits, mime) => {
-        var du = makeImageUrl({data: base64bits, type: mime});
-        this.setState({dataUrl: du});
-        this.props.onImageChanged(du);
+    imageScaled(e.target.files[0], AVATAR_SIZE, AVATAR_SIZE, MAX_EXTERN_ATTACHMENT_SIZE, true,
+      // Image successfully scaled and converted.
+      (mime, blob) => {
+        // Convert blob to base64-encoded bits.
+        blobToBase64(blob, (unused, base64bits) => {
+          const du = makeImageUrl({data: base64bits, type: mime});
+          this.setState({dataUrl: du});
+          this.props.onImageChanged(du);
+        });
       },
       // Failure
       (err) => {

src/widgets/chat-message.jsx

@@ -6,6 +6,7 @@ import { Drafty } from 'tinode-sdk'
 import Attachment from './attachment.jsx';
 import LetterTile from './letter-tile.jsx';
 import ReceivedMarker from './received-marker.jsx'
+import UploadingImage from './uploading-image.jsx'
 import { sanitizeImageUrl, sanitizeUrl } from '../lib/utils.js';
 
 export default class ChatMessage extends React.Component {
@@ -167,12 +168,16 @@ import { fitImageSize } from '../lib/blob-helpers.js';
 function draftyFormatter(style, data, values, key) {
   let el = Drafty.tagName(style);
   if (el) {
-    let attr = Drafty.attrValue(style, data) || {};
+    const attr = Drafty.attrValue(style, data) || {};
     attr.key = key;
     switch (style) {
       case 'IM':
         // Additional processing for images
         if (data) {
+          if (Drafty.isUploading(data)) {
+            // Use custom element instead of <img>.
+            el = 'UploadingImage';
+          }
           attr.className = 'inline-image';
           let dim = fitImageSize(data.width, data.height,
             Math.min(this.props.viewportWidth - REM_SIZE * 4, REM_SIZE * 36), REM_SIZE * 24, false);

src/widgets/image-preview.jsx

@@ -30,8 +30,7 @@ export default class ImagePreview extends React.PureComponent {
 
   handleSendImage(caption) {
     this.props.onClose();
-    this.props.onSendMessage(caption, this.props.content.type,
-      this.props.content.width, this.props.content.height, this.props.content.filename);
+    this.props.onSendMessage(caption, this.props.content.blob);
   }
 
   render() {

src/widgets/uploading-image.jsx

@@ -0,0 +1,20 @@
+// Image view with progress bar and a cancel button.
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import FileProgress from './file-progress.jsx';
+
+export default class UploadingImage extends React.PureComponent {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div className="inline-image">
+        <img src={this.props.src} />
+        <FileProgress progress={this.props.progress} onCancel={this.props.onCancelUpload} />
+      </div>
+    );
+  }
+};