PLT-7397 Added loadImage function instead of Image.prototype.load (#7184)

webapp/components/file_attachment.jsx

@@ -48,14 +48,16 @@ export default class FileAttachment extends React.Component {
         if (fileType === 'image') {
             const thumbnailUrl = getFileThumbnailUrl(fileInfo.id);
 
-            const img = new Image();
+            Utils.loadImage(thumbnailUrl, this.handleImageLoaded);
-            img.onload = () => {
-                this.setState({loaded: true});
-            };
-            img.load(thumbnailUrl);
         }
     }
 
+    handleImageLoaded = () => {
+        this.setState({
+            loaded: true
+        });
+    }
+
     onAttachmentClick(e) {
         e.preventDefault();
         this.props.handleImageClick(this.props.index);

webapp/components/view_image.jsx

@@ -134,28 +134,39 @@ export default class ViewImageModal extends React.Component {
                 previewUrl = getFileUrl(fileInfo.id);
             }
 
-            const img = new Image();
+            Utils.loadImage(
-            img.load(
                 previewUrl,
-                () => {
+                () => this.handleImageLoaded(index),
-                    const progress = this.state.progress;
+                (completedPercentage) => this.handleImageProgress(index, completedPercentage)
-                    progress[index] = img.completedPercentage;
-                    this.setState({progress});
-                }
             );
-            img.onload = () => {
-                const loaded = this.state.loaded;
-                loaded[index] = true;
-                this.setState({loaded});
-            };
         } else {
             // there's nothing to load for non-image files
-            var loaded = this.state.loaded;
+            this.handleImageLoaded(index);
-            loaded[index] = true;
-            this.setState({loaded});
         }
     }
 
+    handleImageLoaded = (index) => {
+        this.setState((prevState) => {
+            return {
+                loaded: {
+                    ...prevState.loaded,
+                    [index]: true
+                }
+            };
+        });
+    }
+
+    handleImageProgress = (index, completedPercentage) => {
+        this.setState((prevState) => {
+            return {
+                progress: {
+                    ...prevState.progress,
+                    [index]: completedPercentage
+                }
+            };
+        });
+    }
+
     handleGetPublicLink() {
         this.props.onModalDismissed();
 

webapp/utils/utils.jsx

@@ -919,32 +919,22 @@ export function getDirectTeammate(channelId) {
     return teammate;
 }
 
-Image.prototype.load = function imageLoad(url, progressCallback) {
+export function loadImage(url, onLoad, onProgress) {
-    var self = this;
+    const request = new XMLHttpRequest();
-    var xmlHTTP = new XMLHttpRequest();
-    xmlHTTP.open('GET', url, true);
-    xmlHTTP.responseType = 'arraybuffer';
-    xmlHTTP.onload = function onLoad() {
-        var h = xmlHTTP.getAllResponseHeaders();
-        var m = h.match(/^Content-Type:\s*(.*?)$/mi);
-        var mimeType = m[1] || 'image/png';
 
-        var blob = new Blob([this.response], {type: mimeType});
+    request.open('GET', url, true);
-        self.src = window.URL.createObjectURL(blob);
+    request.responseType = 'arraybuffer';
-    };
+    request.onload = onLoad;
-    xmlHTTP.onprogress = function onprogress(e) {
+    request.onprogress = (e) => {
-        parseInt(self.completedPercentage = (e.loaded / e.total) * 100, 10);
+        if (onProgress) {
-        if (progressCallback) {
+            const completedPercentage = Math.round((e.loaded / e.total) * 100);
-            progressCallback();
+
+            onProgress(completedPercentage);
         }
     };
-    xmlHTTP.onloadstart = function onloadstart() {
-        self.completedPercentage = 0;
-    };
-    xmlHTTP.send();
-};
 
-Image.prototype.completedPercentage = 0;
+    request.send();
+}
 
 export function changeColor(colourIn, amt) {
     var hex = colourIn;