From 4bbd5f01494a4d91cc03184c3b35ffa56c91529a Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Fri, 31 Aug 2018 12:01:08 +0100
Subject: [PATCH] Do not allow upload of invalid images to gallery

no issue
- added `onUploadStart` action to `{{gh-uploader}}` that is triggered when individual files start uploading
  - will not be triggered for any files that fail client-side validation
- changed `{{koenig-card-gallery}}` to only add images to the local gallery display when the uploader starts an upload
---
 app/components/gh-uploader.js                 |  3 +++
 .../addon/components/koenig-card-gallery.js   | 21 ++++++++-----------
 .../components/koenig-card-gallery.hbs        |  1 +
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/app/components/gh-uploader.js b/app/components/gh-uploader.js
index cc84df3259..e4cdcdbab4 100644
--- a/app/components/gh-uploader.js
+++ b/app/components/gh-uploader.js
@@ -70,6 +70,7 @@ export default Component.extend({
     onComplete() {},
     onFailed() {},
     onStart() {},
+    onUploadStart() {},
     onUploadFailure() {},
     onUploadSuccess() {},
 
@@ -212,6 +213,8 @@ export default Component.extend({
         let url = `${ghostPaths().apiRoot}${this.get('uploadUrl')}`;
 
         try {
+            this.onUploadStart(file);
+
             let response = yield ajax.post(url, {
                 data: formData,
                 processData: false,
diff --git a/lib/koenig-editor/addon/components/koenig-card-gallery.js b/lib/koenig-editor/addon/components/koenig-card-gallery.js
index 3992751391..df29b1b6ca 100644
--- a/lib/koenig-editor/addon/components/koenig-card-gallery.js
+++ b/lib/koenig-editor/addon/components/koenig-card-gallery.js
@@ -117,6 +117,15 @@ export default Component.extend({
     },
 
     actions: {
+        addImage(file) {
+            let count = this.images.length + 1;
+            let row = Math.ceil(count / MAX_PER_ROW) - 1;
+
+            let image = this._readDataFromImageFile(file);
+            image.row = row;
+            this.images.pushObject(image);
+        },
+
         setImageSrc(uploadResult) {
             let image = this.images.findBy('fileName', uploadResult.fileName);
 
@@ -212,18 +221,6 @@ export default Component.extend({
             this.set('errorMessage', 'Galleries are limited to 9 images');
         }
         this.set('files', strippedFiles);
-
-        let count = this.images.length;
-        let row = Math.ceil(count / MAX_PER_ROW) - 1;
-
-        strippedFiles.forEach((file) => {
-            count = count + 1;
-            row = Math.ceil(count / MAX_PER_ROW) - 1;
-
-            let image = this._readDataFromImageFile(file);
-            image.row = row;
-            this.images.pushObject(image);
-        });
     },
 
     _readDataFromImageFile(file) {
diff --git a/lib/koenig-editor/addon/templates/components/koenig-card-gallery.hbs b/lib/koenig-editor/addon/templates/components/koenig-card-gallery.hbs
index 4dbceef488..88ef9f018f 100644
--- a/lib/koenig-editor/addon/templates/components/koenig-card-gallery.hbs
+++ b/lib/koenig-editor/addon/templates/components/koenig-card-gallery.hbs
@@ -18,6 +18,7 @@
         files=files
         accept=imageMimeTypes
         extensions=imageExtensions
+        onUploadStart=(action "addImage")
         onUploadSuccess=(action "setImageSrc")
         onUploadFailure=(action "uploadFailed")
         as |uploader|