From 2639ff62e68c354b4542f175e2d31f16cd90ff15 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Wed, 5 Dec 2018 20:16:03 +0000
Subject: [PATCH] Optimised gallery image upload previews (#1079)

no issue
- use `URL.createObjectURL(file)` to get a blob url rather than using `FileReader.readAsDataURL` which generates a very large data attribute
- speeds up the display of previews and associated browser hangs when an upload finishes, especially noticeable with large images and fast connections where multiple uploads finish around the same time
---
 .../addon/components/koenig-card-gallery.js   | 30 +++++++------------
 1 file changed, 11 insertions(+), 19 deletions(-)

diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-gallery.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-gallery.js
index 3eddb041ec..f6bcd05f8e 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-gallery.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-gallery.js
@@ -228,30 +228,22 @@ export default Component.extend({
     },
 
     _readDataFromImageFile(file) {
-        let reader = new FileReader();
+        let url = URL.createObjectURL(file);
         let image = EmberObject.create({
-            fileName: file.name
+            fileName: file.name,
+            previewSrc: url
         });
 
-        reader.onload = (e) => {
-            let imgElement = new Image();
-            let previewSrc = htmlSafe(e.target.result);
+        let imageElem = new Image();
+        imageElem.onload = () => {
+            // update current display images
+            image.set('width', imageElem.naturalWidth);
+            image.set('height', imageElem.naturalHeight);
 
-            image.set('previewSrc', previewSrc);
-
-            imgElement.onload = () => {
-                // update current display images
-                image.set('width', imgElement.width);
-                image.set('height', imgElement.height);
-
-                // ensure width/height makes it into the payload images
-                this._buildAndSaveImagesPayload();
-            };
-
-            imgElement.src = previewSrc;
+            // ensure width/height makes it into the payload images
+            this._buildAndSaveImagesPayload();
         };
-
-        reader.readAsDataURL(file);
+        imageElem.src = url;
 
         return image;
     },