From bd5f7a8daa150776a52b3c688e3f19f5196be94c Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Fri, 22 Sep 2017 20:59:05 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20missing=20"file=20too=20?=
 =?UTF-8?q?large"=20text=20for=20import=20uploads=20(#867)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closes https://github.com/TryGhost/Ghost/issues/8660

- detect a `413` when uploading an import and show the appropriate message
- refactor `{{gh-file-upload}}` to use closure actions
- add test selectors to import errors HTML
- note: doesn't include tests because `{{gh-file-upload}}` doesn't rely on the file input's `change` event (as used by our other uploader components to facilitate testing) and browsers don't allow us to artificially set and submit files
---
 ghost/admin/app/components/gh-file-upload.js |  9 +++++----
 ghost/admin/app/controllers/settings/labs.js |  3 ++-
 ghost/admin/app/templates/settings/labs.hbs  | 16 +++++++++++-----
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/ghost/admin/app/components/gh-file-upload.js b/ghost/admin/app/components/gh-file-upload.js
index aeb4ff481c..b6ae422763 100644
--- a/ghost/admin/app/components/gh-file-upload.js
+++ b/ghost/admin/app/components/gh-file-upload.js
@@ -7,21 +7,22 @@ export default Component.extend({
     uploadButtonText: 'Text',
     uploadButtonDisabled: true,
 
-    onUpload: null,
-    onAdd: null,
+    // closure actions
+    onUpload() {},
+    onAdd() {},
 
     shouldResetForm: true,
 
     change(event) {
         this.set('uploadButtonDisabled', false);
-        this.sendAction('onAdd');
+        this.onAdd();
         this._file = event.target.files[0];
     },
 
     actions: {
         upload() {
             if (!this.get('uploadButtonDisabled') && this._file) {
-                this.sendAction('onUpload', this._file);
+                this.onUpload(this._file);
             }
 
             // Prevent double post by disabling the button.
diff --git a/ghost/admin/app/controllers/settings/labs.js b/ghost/admin/app/controllers/settings/labs.js
index f7b46a0a91..87916a21f3 100644
--- a/ghost/admin/app/controllers/settings/labs.js
+++ b/ghost/admin/app/controllers/settings/labs.js
@@ -4,6 +4,7 @@ import Ember from 'ember';
 import RSVP from 'rsvp';
 import {
     UnsupportedMediaTypeError,
+    isRequestEntityTooLargeError,
     isUnsupportedMediaTypeError
 } from 'ghost-admin/services/ajax';
 import {inject as injectService} from '@ember/service';
@@ -154,7 +155,7 @@ export default Controller.extend({
                     });
                 });
             }).catch((response) => {
-                if (isUnsupportedMediaTypeError(response)) {
+                if (isUnsupportedMediaTypeError(response) || isRequestEntityTooLargeError(response)) {
                     this.set('importErrors', [response]);
                     return;
                 }
diff --git a/ghost/admin/app/templates/settings/labs.hbs b/ghost/admin/app/templates/settings/labs.hbs
index 1398a4e858..f2ae6d9548 100644
--- a/ghost/admin/app/templates/settings/labs.hbs
+++ b/ghost/admin/app/templates/settings/labs.hbs
@@ -14,13 +14,19 @@
             </div>
             <div class="gh-setting-action">
                 <form id="settings-import" enctype="multipart/form-data">
-                    {{gh-file-upload id="importfile" classNames="flex" uploadButtonText=uploadButtonText onUpload="onUpload" acceptEncoding=importMimeType}}
+                    {{gh-file-upload
+                        id="importfile"
+                        classNames="flex"
+                        uploadButtonText=uploadButtonText
+                        onUpload=(action "onUpload")
+                        acceptEncoding=importMimeType
+                        data-test-file-input="import"}}
                 </form>
             </div>
         </div>
 
         {{#if importErrors}}
-            <div class="gh-import-errors {{if importSuccessful "gh-import-errors-warning"}}">
+            <div class="gh-import-errors {{if importSuccessful "gh-import-errors-warning"}}" data-test-import-errors>
                 <div class="gh-import-errors-title">
                     {{#if importSuccessful}}
                         Import successful with warnings
@@ -30,13 +36,13 @@
                 </div>
 
                 {{#each importErrors as |error|}}
-                    <div class="gh-import-error">
-                        <p class="gh-import-error-message">
+                    <div class="gh-import-error" data-test-import-error>
+                        <p class="gh-import-error-message" data-test-import-error-message>
                             {{#if error.help}}{{error.help}}: {{/if}}{{error.message}}
                         </p>
 
                         {{#if error.context}}
-                            <div class="gh-import-error-entry">
+                            <div class="gh-import-error-entry" data-test-import-error-context>
                                 <pre>{{error.context}}</pre>
                             </div>
                         {{/if}}