out of band image uploads work, need testing and polish

src/lib/utils.js

@@ -94,7 +94,7 @@ export function isUrlRelative(url) {
 // Ensure URL does not present an XSS risk. Optional allowedSchemes may contain an array of
 // strings with permitted URL schemes, such as ['ftp', 'ftps']; otherwise accept http and https only.
 // If apikey and/or token is defined, it's appended to relative URL.
-export function sanitizeUrl(url) {
+export function sanitizeUrl(url, allowedSchemes) {
   if (!url) {
     return null;
   }

src/views/messages-view.jsx

@@ -694,9 +694,8 @@ class MessagesView extends React.Component {
       // Make small preview to show while uploading.
       imageScaled(blob, IMAGE_PREVIEW_DIM, IMAGE_PREVIEW_DIM, -1, false,
         (tinyBlob) => {
-          // COnvert tiny image into base64 for serialization and previewing.
+          // Convert tiny image into base64 for serialization and previewing.
           blobToBase64(tinyBlob, (blobMime, tinyBits64) => {
-            // content, insert_at, mime, base64bits, width, height, fname, size, refurl
             let msg = Drafty.insertImage(null, 0, {
               mime: mime,
               _tempPreview: tinyBits64, // This preview will not be serialized.

src/widgets/chat-message.jsx

@@ -174,17 +174,12 @@ function draftyFormatter(style, data, values, key) {
       case 'IM':
         // Additional processing for images
         if (data) {
-          const uploading = Drafty.isProcessing(data);
-          if (uploading) {
-            // 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);
-          dim = dim || {dstWidth: BROKEN_IMAGE_SIZE, dstHeight: BROKEN_IMAGE_SIZE};
+          const dim = fitImageSize(data.width, data.height,
+            Math.min(this.props.viewportWidth - REM_SIZE * 4, REM_SIZE * 36), REM_SIZE * 24, false) ||
+            {dstWidth: BROKEN_IMAGE_SIZE, dstHeight: BROKEN_IMAGE_SIZE};
           attr.style = { width: dim.dstWidth + 'px', height: dim.dstHeight + 'px' };
-          if (!uploading) {
+          if (!Drafty.isProcessing(data)) {
             attr.src = this.props.tinode.authorizeURL(sanitizeImageUrl(attr.src));
             if (attr.src) {
               attr.onClick = this.handleImagePreview;
@@ -192,6 +187,9 @@ function draftyFormatter(style, data, values, key) {
             } else {
               attr.src = 'img/broken_image.png';
             }
+          } else {
+            // Use custom element instead of <img>.
+            el = UploadingImage;
           }
         }
         break;

src/widgets/uploading-image.jsx

@@ -12,8 +12,10 @@ export default class UploadingImage extends React.PureComponent {
   render() {
     return (
       <div className="inline-image">
-        <img src={this.props.src} />
-        <FileProgress progress={this.props.progress} onCancel={this.props.onCancelUpload} />
+        {React.createElement('img', this.props)}
+        <div className="rounded-container">
+          <FileProgress progress={this.props.progress} onCancel={this.props.onCancelUpload} />
+        </div>
       </div>
     );
   }