🐛 Fixed missing "file too large" text for import uploads (#867)

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

@@ -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.

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;
                 }

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}}