wip: fixing bugs in image uploads and display

src/lib/utils.js

@@ -93,7 +93,8 @@ 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.
-export function sanitizeUrl(url, allowedSchemes) {
+// If apikey is defined, it's appended to relative URL.
+export function sanitizeUrl(url, apikey) {
   if (!url) {
     return null;
   }
@@ -102,6 +103,7 @@ export function sanitizeUrl(url, allowedSchemes) {
   url = url.replace(/[^\x20-\x7E]/gmi, '').trim();
 
   // Relative URLs are safe.
+  // Relative URL does not start with ':', abcd123: or '//'.
   if (!/^([a-z][a-z0-9+.-]*:|\/\/)/i.test(url)) {
     return url;
   }
@@ -121,14 +123,15 @@ export function sanitizeUrl(url, allowedSchemes) {
 }
 
 // Ensure URL is suitable for <img src="url"> field: the URL must be a relative URL or
-// have http:, https:, or data: scheme. In case of data: scheme, the URL must start with
+// have http:, https:, or data: scheme.
-// a 'data:image/XXXX;base64,'.
+// The relative URL is appended with the API key.
-export function sanitizeImageUrl(url) {
+// In case of data: scheme, the URL must start with a 'data:image/XXXX;base64,'.
+export function sanitizeImageUrl(url, apikey) {
   if (!url) {
     return null;
   }
 
-  const sanitizedUrl = sanitizeUrl(url);
+  const sanitizedUrl = sanitizeUrl(url, apikey);
   if (sanitizedUrl) {
     return sanitizedUrl;
   }

src/widgets/chat-message.jsx

@@ -174,7 +174,8 @@ function draftyFormatter(style, data, values, key) {
       case 'IM':
         // Additional processing for images
         if (data) {
-          if (Drafty.isUploading(data)) {
+          const uploading = Drafty.isUploading(data);
+          if (uploading) {
             // Use custom element instead of <img>.
             el = 'UploadingImage';
           }
@@ -183,6 +184,7 @@ function draftyFormatter(style, data, values, key) {
             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};
           attr.style = { width: dim.dstWidth + 'px', height: dim.dstHeight + 'px' };
+          if (!uploading) {
             attr.src = sanitizeImageUrl(attr.src);
             if (attr.src) {
               attr.onClick = this.handleImagePreview;
@@ -191,6 +193,7 @@ function draftyFormatter(style, data, values, key) {
               attr.src = 'img/broken_image.png';
             }
           }
+        }
         break;
       case 'BN':
         // Button

umd/index.dev.js

@@ -6733,7 +6733,9 @@ function draftyFormatter(style, data, values, key) {
     switch (style) {
       case 'IM':
         if (data) {
-          if (tinode_sdk__WEBPACK_IMPORTED_MODULE_2__["Drafty"].isUploading(data)) {
+          const uploading = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__["Drafty"].isUploading(data);
+
+          if (uploading) {
             el = 'UploadingImage';
           }
 
@@ -6747,6 +6749,8 @@ function draftyFormatter(style, data, values, key) {
             width: dim.dstWidth + 'px',
             height: dim.dstHeight + 'px'
           };
+
+          if (!uploading) {
             attr.src = Object(_lib_utils_js__WEBPACK_IMPORTED_MODULE_7__["sanitizeImageUrl"])(attr.src);
 
             if (attr.src) {
@@ -6756,6 +6760,7 @@ function draftyFormatter(style, data, values, key) {
               attr.src = 'img/broken_image.png';
             }
           }
+        }
 
         break;