From 388053dfd4adf8ddfcd7c8412a6c30285cd609a4 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 15 Jun 2020 13:16:10 +0100
Subject: [PATCH] Updated image card to store original width/height in payload

no issue

- extract width/height from selected local image when uploading and store in the payload with `src` once upload finishes
- capture width/height from Unsplash and store in the payload after selecting an image
---
 app/components/gh-unsplash.js                 |  2 ++
 .../addon/components/koenig-card-image.js     | 28 +++++++++++++------
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/app/components/gh-unsplash.js b/app/components/gh-unsplash.js
index 6c939fdf7..2c945e970 100644
--- a/app/components/gh-unsplash.js
+++ b/app/components/gh-unsplash.js
@@ -79,6 +79,8 @@ export default Component.extend(ShortcutsMixin, {
 
             let selectParams = {
                 src: photo.urls.regular.replace(/&w=1080/, '&w=2000'),
+                width: photo.width,
+                height: photo.height,
                 alt: photo.description || '',
                 caption: `Photo by <a href="${photo.user.links.html}?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">${photo.user.name}</a> / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Unsplash</a>`
             };
diff --git a/lib/koenig-editor/addon/components/koenig-card-image.js b/lib/koenig-editor/addon/components/koenig-card-image.js
index 900658c54..bb251b057 100644
--- a/lib/koenig-editor/addon/components/koenig-card-image.js
+++ b/lib/koenig-editor/addon/components/koenig-card-image.js
@@ -6,7 +6,6 @@ import {
 } from 'ghost-admin/components/gh-image-uploader';
 import {action, computed, set, setProperties} from '@ember/object';
 import {utils as ghostHelperUtils} from '@tryghost/helpers';
-import {htmlSafe} from '@ember/string';
 import {isEmpty} from '@ember/utils';
 import {run} from '@ember/runloop';
 import {inject as service} from '@ember/service';
@@ -164,6 +163,12 @@ export default Component.extend({
             // create undo snapshot when image finishes uploading
             this.editor.run(() => {
                 this._updatePayloadAttr('src', image.url);
+                if (this._imageWidth && this._imageHeight) {
+                    this._updatePayloadAttr('width', this._imageWidth);
+                    this._updatePayloadAttr('height', this._imageHeight);
+                }
+                this._imageWidth = null;
+                this._imageHeight = null;
             });
         },
 
@@ -180,30 +185,37 @@ export default Component.extend({
         setPreviewSrc(files) {
             let file = files[0];
             if (file) {
-                let reader = new FileReader();
+                let url = URL.createObjectURL(file);
+                this.set('previewSrc', url);
 
-                reader.onload = (e) => {
-                    this.set('previewSrc', htmlSafe(e.target.result));
+                let imageElem = new Image();
+                imageElem.onload = () => {
+                    // store width/height for use later to avoid saving an image card with no `src`
+                    this._imageWidth = imageElem.naturalWidth;
+                    this._imageHeight = imageElem.naturalHeight;
                 };
-
-                reader.readAsDataURL(file);
+                imageElem.src = url;
             }
         },
 
         resetSrcs() {
             this.set('previewSrc', null);
+            this._imageWidth = null;
+            this._imageHeight = null;
 
             // create undo snapshot when clearing
             this.editor.run(() => {
                 this._updatePayloadAttr('src', null);
+                this._updatePayloadAttr('width', null);
+                this._updatePayloadAttr('height', null);
             });
         },
 
-        selectFromImageSelector({src, caption, alt}) {
+        selectFromImageSelector({src, width, height, caption, alt}) {
             let {payload, saveCard} = this;
             let searchTerm;
 
-            setProperties(payload, {src, caption, alt, searchTerm});
+            setProperties(payload, {src, width, height, caption, alt, searchTerm});
 
             this.send('closeImageSelector');