out of band image uploads work, need testing and polish

css/base.css

@@ -541,6 +541,15 @@ div.alert .content {
   margin-left: 1rem;
 }
 
+/* Container with whitish background and rounded corners */
+.rounded-container {
+  position: relative;
+  background-color: #fafafa;
+  border-radius: 0.1rem;
+  padding: 0.25rem;
+  margin: 0.25rem;
+}
+
 /* BEGIN InPlaceEdit styles */
 .in-place-edit {
   display: inline-block;
@@ -1520,8 +1529,9 @@ i.search {
   color:#777;
 }
 
-/* Inline image styles */
+/* Inline image style */
 .inline-image {
+  position: relative;
   max-width: 36rem;
   max-height: 24rem;
   overflow: hidden;
@@ -1529,6 +1539,16 @@ i.search {
   display: block;
 }
 
+/* Container with upload progress */
+.inline-image > .rounded-container {
+  position: relative;
+  margin: 0.25rem auto;
+  bottom: 2rem;
+  /* Imitating minimum margins on the left and right */
+  border-left: 0.25rem solid transparent;
+  border-right: 0.25rem solid transparent;
+}
+
 /* Attachment styles */
 .attachment {
   display: flex;

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,
+          const dim = fitImageSize(data.width, data.height,
-            Math.min(this.props.viewportWidth - REM_SIZE * 4, REM_SIZE * 36), REM_SIZE * 24, false);
+            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};
+            {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,9 +12,11 @@ export default class UploadingImage extends React.PureComponent {
   render() {
     return (
       <div className="inline-image">
-        <img src={this.props.src} />
+        {React.createElement('img', this.props)}
+        <div className="rounded-container">
           <FileProgress progress={this.props.progress} onCancel={this.props.onCancelUpload} />
         </div>
+      </div>
     );
   }
 };

umd/index.dev.js

@@ -734,7 +734,7 @@ function asEmail(val) {
 function isUrlRelative(url) {
   return !/^\s*([a-z][a-z0-9+.-]*:|\/\/)/im.test(url);
 }
-function sanitizeUrl(url) {
+function sanitizeUrl(url, allowedSchemes) {
   if (!url) {
     return null;
   }
@@ -6689,15 +6689,8 @@ function draftyFormatter(style, data, values, key) {
     switch (style) {
       case 'IM':
         if (data) {
-          const uploading = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__["Drafty"].isProcessing(data);
-
-          if (uploading) {
-            el = _uploading_image_jsx__WEBPACK_IMPORTED_MODULE_6__["default"];
-          }
-
           attr.className = 'inline-image';
-          let dim = Object(_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_9__["fitImageSize"])(data.width, data.height, Math.min(this.props.viewportWidth - _config_js__WEBPACK_IMPORTED_MODULE_8__["REM_SIZE"] * 4, _config_js__WEBPACK_IMPORTED_MODULE_8__["REM_SIZE"] * 36), _config_js__WEBPACK_IMPORTED_MODULE_8__["REM_SIZE"] * 24, false);
+          const dim = Object(_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_9__["fitImageSize"])(data.width, data.height, Math.min(this.props.viewportWidth - _config_js__WEBPACK_IMPORTED_MODULE_8__["REM_SIZE"] * 4, _config_js__WEBPACK_IMPORTED_MODULE_8__["REM_SIZE"] * 36), _config_js__WEBPACK_IMPORTED_MODULE_8__["REM_SIZE"] * 24, false) || {
-          dim = dim || {
             dstWidth: _config_js__WEBPACK_IMPORTED_MODULE_8__["BROKEN_IMAGE_SIZE"],
             dstHeight: _config_js__WEBPACK_IMPORTED_MODULE_8__["BROKEN_IMAGE_SIZE"]
           };
@@ -6706,7 +6699,7 @@ function draftyFormatter(style, data, values, key) {
             height: dim.dstHeight + 'px'
           };
 
-          if (!uploading) {
+          if (!tinode_sdk__WEBPACK_IMPORTED_MODULE_2__["Drafty"].isProcessing(data)) {
             attr.src = this.props.tinode.authorizeURL(Object(_lib_utils_js__WEBPACK_IMPORTED_MODULE_7__["sanitizeImageUrl"])(attr.src));
 
             if (attr.src) {
@@ -6715,6 +6708,8 @@ function draftyFormatter(style, data, values, key) {
             } else {
               attr.src = 'img/broken_image.png';
             }
+          } else {
+            el = _uploading_image_jsx__WEBPACK_IMPORTED_MODULE_6__["default"];
           }
         }
 
@@ -10096,12 +10091,12 @@ class UploadingImage extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureCo
   render() {
     return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
       className: "inline-image"
-    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("img", {
+    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement('img', this.props), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-      src: this.props.src
+      className: "rounded-container"
-    }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_file_progress_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
+    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_file_progress_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
       progress: this.props.progress,
       onCancel: this.props.onCancelUpload
-    }));
+    })));
   }
 
 }