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

3 files changed, 46 insertions, 43 deletions

diff --git a/webapp/components/file_attachment.jsx b/webapp/components/file_attachment.jsx
index 3d7f936c8..5642d33c5 100644
--- a/webapp/components/file_attachment.jsx
+++ b/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();
-            img.onload = () => {
-                this.setState({loaded: true});
-            };
-            img.load(thumbnailUrl);
+            Utils.loadImage(thumbnailUrl, this.handleImageLoaded);
         }
     }
 
+    handleImageLoaded = () => {
+        this.setState({
+            loaded: true
+        });
+    }
+
     onAttachmentClick(e) {
         e.preventDefault();
         this.props.handleImageClick(this.props.index);
diff --git a/webapp/components/view_image.jsx b/webapp/components/view_image.jsx
index 7872867f3..cc0bcee9d 100644
--- a/webapp/components/view_image.jsx
+++ b/webapp/components/view_image.jsx
@@ -134,28 +134,39 @@ export default class ViewImageModal extends React.Component {
                 previewUrl = getFileUrl(fileInfo.id);
             }
 
-            const img = new Image();
-            img.load(
+            Utils.loadImage(
                 previewUrl,
-                () => {
-                    const progress = this.state.progress;
-                    progress[index] = img.completedPercentage;
-                    this.setState({progress});
-                }
+                () => this.handleImageLoaded(index),
+                (completedPercentage) => this.handleImageProgress(index, completedPercentage)
             );
-            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;
-            loaded[index] = true;
-            this.setState({loaded});
+            this.handleImageLoaded(index);
         }
     }
 
+    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();
 
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 08205141e..0af1ee220 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -919,32 +919,22 @@ export function getDirectTeammate(channelId) {
     return teammate;
 }
 
-Image.prototype.load = function imageLoad(url, progressCallback) {
-    var self = this;
-    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});
-        self.src = window.URL.createObjectURL(blob);
-    };
-    xmlHTTP.onprogress = function onprogress(e) {
-        parseInt(self.completedPercentage = (e.loaded / e.total) * 100, 10);
-        if (progressCallback) {
-            progressCallback();
+export function loadImage(url, onLoad, onProgress) {
+    const request = new XMLHttpRequest();
+
+    request.open('GET', url, true);
+    request.responseType = 'arraybuffer';
+    request.onload = onLoad;
+    request.onprogress = (e) => {
+        if (onProgress) {
+            const completedPercentage = Math.round((e.loaded / e.total) * 100);
+
+            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;