🔥 remove URL input option from image upload components

refs https://github.com/TryGhost/Ghost/issues/8032
- `fileStorage: false` config is going away, it predates storage engines and will simplify future image optimisation work
- simplifies UI, it can be brought back in the future in a more robust fashion if required

ghost/admin/app/components/gh-image-uploader-with-preview.js

@@ -9,12 +9,6 @@ export default Component.extend({
             }
         },
 
-        onInput() {
-            if (typeof this.attrs.onInput === 'function') {
-                this.attrs.onInput(...arguments);
-            }
-        },
-
         uploadStarted() {
             if (typeof this.attrs.uploadStarted === 'function') {
                 this.attrs.uploadStarted(...arguments);
@@ -27,12 +21,6 @@ export default Component.extend({
             }
         },
 
-        formChanged() {
-            if (typeof this.attrs.formChanged === 'function') {
-                this.attrs.formChanged(...arguments);
-            }
-        },
-
         remove() {
             invokeAction(this, 'remove');
         }

ghost/admin/app/components/gh-image-uploader.js

@@ -5,7 +5,6 @@ import {htmlSafe} from 'ember-string';
 import {isBlank} from 'ember-utils';
 import {isEmberArray} from 'ember-array/utils';
 import run from 'ember-runloop';
-
 import {invokeAction} from 'ember-invoke-action';
 import ghostPaths from 'ghost-admin/utils/ghost-paths';
 import {
@@ -27,18 +26,15 @@ export default Component.extend({
     accept: null,
     extensions: null,
     uploadUrl: null,
-    allowUrlInput: true,
     validate: null,
 
     dragClass: null,
     failureMessage: null,
     file: null,
-    formType: 'upload',
     url: null,
     uploadPercentage: 0,
 
     ajax: injectService(),
-    config: injectService(),
     notifications: injectService(),
 
     _defaultAccept: 'image/gif,image/jpg,image/jpeg,image/png,image/svg+xml',
@@ -75,17 +71,6 @@ export default Component.extend({
         return htmlSafe(`width: ${width}`);
     }),
 
-    canShowUploadForm: computed('config.fileStorage', function () {
-        return this.get('config.fileStorage') !== false;
-    }),
-
-    showUploadForm: computed('formType', function () {
-        let canShowUploadForm = this.get('canShowUploadForm');
-        let formType = this.get('formType');
-
-        return formType === 'upload' && canShowUploadForm;
-    }),
-
     didReceiveAttrs() {
         let image = this.get('image');
         this.set('url', image);
@@ -102,8 +87,6 @@ export default Component.extend({
     },
 
     dragOver(event) {
-        let showUploadForm = this.get('showUploadForm');
-
         if (!event.dataTransfer) {
             return;
         }
@@ -116,33 +99,22 @@ export default Component.extend({
         event.stopPropagation();
         event.preventDefault();
 
-        if (showUploadForm) {
         this.set('dragClass', '-drag-over');
-        }
     },
 
     dragLeave(event) {
-        let showUploadForm = this.get('showUploadForm');
-
         event.preventDefault();
-
-        if (showUploadForm) {
         this.set('dragClass', null);
-        }
     },
 
     drop(event) {
-        let showUploadForm = this.get('showUploadForm');
-
         event.preventDefault();
 
         this.set('dragClass', null);
 
-        if (showUploadForm) {
         if (event.dataTransfer.files) {
             this.send('fileSelected', event.dataTransfer.files);
         }
-        }
     },
 
     _uploadStarted() {
@@ -269,24 +241,11 @@ export default Component.extend({
             }
         },
 
-        onInput(url) {
-            this.set('url', url);
-            invokeAction(this, 'onInput', url);
-        },
-
         reset() {
             this.set('file', null);
             this.set('uploadPercentage', 0);
         },
 
-        switchForm(formType) {
-            this.set('formType', formType);
-
-            run.scheduleOnce('afterRender', this, function () {
-                invokeAction(this, 'formChanged', formType);
-            });
-        },
-
         saveUrl() {
             let url = this.get('url');
             invokeAction(this, 'update', url);

ghost/admin/app/components/gh-profile-image.js

@@ -29,7 +29,6 @@ export default Component.extend({
 
     validEmail: '',
     hasUploadedImage: false,
-    fileStorage: true,
     ajax: AjaxService.create(),
 
     config: injectService(),

ghost/admin/app/styles/components/uploader.css

@@ -73,51 +73,6 @@
     font-size: 1.6rem;
 }
 
-.gh-image-uploader .image-upload,
-.gh-image-uploader .image-url {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    display: block;
-    padding: 10px;
-    color: var(--midgrey);
-    text-decoration: none;
-    font-size: 14px;
-    line-height: 12px;
-}
-
-.gh-image-uploader a {
-    color: var(--midgrey);
-    text-decoration: none;
-}
-
-.gh-image-uploader a:hover {
-    color: var(--darkgrey);
-}
-.gh-image-uploader .image-upload:hover,
-.gh-image-uploader .image-url:hover {
-    cursor: pointer;
-}
-
-.gh-image-uploader form {
-    padding: 55px 60px;
-    width: 100%;
-}
-
-.gh-image-uploader input.url {
-    margin: 0 0 10px 0;
-    padding: 9px 7px;
-    outline: 0;
-    background: #fff;
-    vertical-align: middle;
-    font: -webkit-small-control;
-    font-size: 1.4rem;
-}
-
-.gh-image-uploader input.url + .gh-btn.gh-btn-blue {
-    color: #fff;
-}
-
 .gh-image-uploader .image-cancel:hover {
     background: var(--red);
     color: #fff;

ghost/admin/app/templates/components/gh-ed-preview.hbs

@@ -8,7 +8,6 @@
             update=(action "updateImageSrc" uploader.index)
             remove=(action "updateImageSrc" uploader.index "")
             uploadStarted=uploadStarted
-            uploadFinished=uploadFinished
+            uploadFinished=uploadFinished}}
-            formChanged=(action "updateHeight")}}
     {{/ember-wormhole}}
 {{/each}}

ghost/admin/app/templates/components/gh-image-uploader-with-preview.hbs

@@ -10,9 +10,7 @@
         text=text
         altText=altText
         update=(action 'update')
-        onInput=(action 'onInput')
         uploadStarted=(action 'uploadStarted')
         uploadFinished=(action 'uploadFinished')
-        formChanged=(action 'formChanged')
     }}
 {{/if}}

ghost/admin/app/templates/components/gh-image-uploader.hbs

@@ -12,33 +12,10 @@
         <button class="gh-btn gh-btn-green" {{action "reset"}}><span>Try Again</span></button>
     {{/if}}
 {{else}}
-    {{#if showUploadForm}}
     {{!-- file selection/drag-n-drop  --}}
     <div class="upload-form">
         {{#gh-file-input multiple=false alt=description action=(action "fileSelected") accept=accept}}
             <div class="description">{{description}}</div>
         {{/gh-file-input}}
     </div>
-        {{#if allowUrlInput}}
-            <a class="image-url" {{action "switchForm" "url-input"}}>
-                <i class="icon-link"><span class="hidden">URL</span></i>
-            </a>
-        {{/if}}
-    {{else}}
-        {{!-- URL input --}}
-        <form class="url-form">
-            {{gh-input url class="url" placeholder="http://" update=(action "onInput") onenter=(action "saveUrl")}}
-            {{#if saveButton}}
-                <button class="gh-btn gh-btn-blue gh-input" {{action "saveUrl"}}><span>Save</span></button>
-            {{else}}
-                <div class="description">{{description}}</div>
-            {{/if}}
-        </form>
-
-        {{#if canShowUploadForm}}
-            <a class="image-upload icon-photos" title="Add image" {{action "switchForm" "upload"}}>
-                <span class="hidden">Upload</span>
-            </a>
-        {{/if}}
-    {{/if}}
 {{/if}}

ghost/admin/app/templates/components/gh-profile-image.hbs

@@ -13,5 +13,5 @@
             <span class="sr-only">Upload an image</span>
         </i>
     </span>
-    {{#if fileStorage}}<input type="file" class="file-uploader js-file-input" name="uploadimage">{{/if}}
+    <input type="file" class="file-uploader js-file-input" name="uploadimage">
 </figure>

ghost/admin/app/templates/components/modals/upload-image.hbs

@@ -11,10 +11,8 @@
             image=newUrl
             saveButton=false
             update=(action 'fileUploaded')
-            onInput=(action (mut newUrl))
             accept=model.accept
             extensions=model.extensions
-            allowUrlInput=model.allowUrlInput
             uploadUrl=model.uploadUrl
         }}
     {{/if}}

ghost/admin/app/templates/settings/general.hbs

@@ -66,7 +66,7 @@
 
                 {{#if showUploadIconModal}}
                     {{gh-fullscreen-modal "upload-image"
-                            model=(hash model=model imageProperty="icon" accept=iconMimeTypes extensions=iconExtensions allowUrlInput=false uploadUrl="/uploads/icon/")
+                            model=(hash model=model imageProperty="icon" accept=iconMimeTypes extensions=iconExtensions uploadUrl="/uploads/icon/")
                             close=(action "toggleUploadIconModal")
                             modifier="action wide"}}
                 {{/if}}
@@ -86,7 +86,7 @@
 
                 {{#if showUploadLogoModal}}
                     {{gh-fullscreen-modal "upload-image"
-                            model=(hash model=model imageProperty="logo" allowUrlInput=true)
+                            model=(hash model=model imageProperty="logo")
                             close=(action "toggleUploadLogoModal")
                             modifier="action wide"}}
                 {{/if}}
@@ -106,7 +106,7 @@
 
                 {{#if showUploadCoverModal}}
                     {{gh-fullscreen-modal "upload-image"
-                            model=(hash model=model imageProperty="cover" allowUrlInput=true)
+                            model=(hash model=model imageProperty="cover")
                             close=(action "toggleUploadCoverModal")
                             modifier="action wide"}}
                 {{/if}}

ghost/admin/app/templates/setup/two.hbs

@@ -38,7 +38,7 @@
         <input style="display:none;" type="text" name="fakeusernameremembered"/>
         <input style="display:none;" type="password" name="fakepasswordremembered"/>
 
-        {{gh-profile-image fileStorage=config.fileStorage email=email setImage="setImage"}}
+        {{gh-profile-image email=email setImage="setImage"}}
         {{#gh-form-group errors=errors hasValidated=hasValidated property="email"}}
             <label for="email-address">Email address</label>
             <span class="input-icon icon-mail">

ghost/admin/app/templates/signup.hbs

@@ -26,7 +26,7 @@
                     <input style="display:none;" type="text" name="fakeusernameremembered"/>
                     <input style="display:none;" type="password" name="fakepasswordremembered"/>
 
-                    {{gh-profile-image fileStorage=config.fileStorage email=model.email setImage="setImage"}}
+                    {{gh-profile-image email=model.email setImage="setImage"}}
 
                     {{#gh-form-group}}
                         <label for="email-address">Email address</label>

ghost/admin/app/templates/team/user.hbs

@@ -55,7 +55,7 @@
             <button class="gh-btn gh-btn-default user-cover-edit" {{action "toggleUploadCoverModal"}}><span>Change Cover</span></button>
             {{#if showUploadCoverModal}}
                 {{gh-fullscreen-modal "upload-image"
-                                      model=(hash model=user imageProperty="cover" allowUrlInput=true)
+                                      model=(hash model=user imageProperty="cover")
                                       close=(action "toggleUploadCoverModal")
                                       modifier="action wide"}}
             {{/if}}
@@ -74,7 +74,7 @@
                     <button type="button" {{action "toggleUploadImageModal"}} class="edit-user-image">Edit Picture</button>
                     {{#if showUploadImageModal}}
                         {{gh-fullscreen-modal "upload-image"
-                                              model=(hash model=user imageProperty="image" allowUrlInput=true)
+                                              model=(hash model=user imageProperty="image")
                                               close=(action "toggleUploadImageModal")
                                               modifier="action wide"}}
                     {{/if}}

ghost/admin/lib/gh-koenig/addon/components/cards/image-card.js

@@ -33,12 +33,10 @@ export default Component.extend({
     dragClass: null,
     failureMessage: null,
     file: null,
-    formType: 'upload',
     url: null,
     uploadPercentage: 0,
 
     ajax: injectService(),
-    config: injectService(),
     notifications: injectService(),
 
     // TODO: this wouldn't be necessary if the server could accept direct
@@ -70,17 +68,6 @@ export default Component.extend({
         return htmlSafe(`width: ${width}`);
     }),
 
-    canShowUploadForm: computed('config.fileStorage', function () {
-        return this.get('config.fileStorage') !== false;
-    }),
-
-    showUploadForm: computed('formType', function () {
-        let canShowUploadForm = this.get('canShowUploadForm');
-        let formType = this.get('formType');
-
-        return formType === 'upload' && canShowUploadForm;
-    }),
-
     didReceiveAttrs() {
         let image = this.get('payload');
         if (image.img) {
@@ -93,8 +80,6 @@ export default Component.extend({
     },
 
     dragOver(event) {
-        let showUploadForm = this.get('showUploadForm');
-
         if (!event.dataTransfer) {
             return;
         }
@@ -107,33 +92,22 @@ export default Component.extend({
         event.stopPropagation();
         event.preventDefault();
 
-        if (showUploadForm) {
         this.set('dragClass', '-drag-over');
-        }
     },
 
     dragLeave(event) {
-        let showUploadForm = this.get('showUploadForm');
-
         event.preventDefault();
-
-        if (showUploadForm) {
         this.set('dragClass', null);
-        }
     },
 
     drop(event) {
-        let showUploadForm = this.get('showUploadForm');
-
         event.preventDefault();
 
         this.set('dragClass', null);
 
-        if (showUploadForm) {
         if (event.dataTransfer.files) {
             this.send('fileSelected', event.dataTransfer.files);
         }
-        }
     },
 
     _uploadStarted() {
@@ -272,24 +246,11 @@ export default Component.extend({
             }
         },
 
-        onInput(url) {
-            this.set('url', url);
-            invokeAction(this, 'onInput', url);
-        },
-
         reset() {
             this.set('file', null);
             this.set('uploadPercentage', 0);
         },
 
-        switchForm(formType) {
-            this.set('formType', formType);
-
-            run.scheduleOnce('afterRender', this, function () {
-                invokeAction(this, 'formChanged', formType);
-            });
-        },
-
         saveUrl() {
             let url = this.get('url');
             invokeAction(this, 'update', url);

ghost/admin/lib/gh-koenig/addon/templates/components/image-card.hbs

@@ -15,32 +15,10 @@
         <button class="btn btn-green" {{action "reset"}}>Try Again</button>
     {{/if}}
 {{else}}
-    {{#if showUploadForm}}
     {{!-- file selection/drag-n-drop  --}}
     <div class="upload-form">
         {{#gh-file-input multiple=false alt=description action=(action 'fileSelected') accept=accept}}
             <div class="description">{{description}}</div>
         {{/gh-file-input}}
     </div>
-
-        <a class="image-url" {{action 'switchForm' 'url-input'}}>
-            <i class="icon-link"><span class="hidden">URL</span></i>
-        </a>
-    {{else}}
-    {{!-- URL input --}}
-        <form class="url-form">
-            {{gh-input url class="url" placeholder="http://" update=(action "onInput") onenter=(action "saveUrl")}}
-            {{#if saveButton}}
-                <button class="btn btn-blue gh-input" {{action 'saveUrl'}}>Save</button>
-            {{else}}
-                <div class="description">{{description}}</div>
-            {{/if}}
-        </form>
-
-        {{#if canShowUploadForm}}
-            <a class="image-upload icon-photos" title="Add image" {{action 'switchForm' 'upload'}}>
-                <span class="hidden">Upload</span>
-            </a>
-        {{/if}}
-    {{/if}}
 {{/if}}

ghost/admin/tests/acceptance/settings/general-test.js

@@ -101,7 +101,6 @@ describe('Acceptance: Settings - General', function () {
 
             andThen(() => {
                 expect(find('.fullscreen-modal .modal-content .gh-image-uploader .description').text()).to.equal('Upload an image');
-                expect(find('.fullscreen-modal .modal-content .gh-image-uploader .image-url').length, 'url upload').to.equal(1);
             });
 
             // click cancel button
@@ -121,7 +120,6 @@ describe('Acceptance: Settings - General', function () {
 
             andThen(() => {
                 expect(find('.fullscreen-modal .modal-content .gh-image-uploader .description').text()).to.equal('Upload an image');
-                expect(find('.fullscreen-modal .modal-content .gh-image-uploader .image-url').length, 'url upload').to.equal(0);
             });
 
             // click cancel button

ghost/admin/tests/integration/components/gh-image-uploader-test.js

@@ -12,14 +12,6 @@ import run from 'ember-runloop';
 import Service from 'ember-service';
 import {UnsupportedMediaTypeError} from 'ghost-admin/services/ajax';
 
-const keyCodes = {
-    enter: 13
-};
-
-const configStub = Service.extend({
-    fileStorage: true
-});
-
 const notificationsStub = Service.extend({
     showAPIError(/* error, options */) {
         // noop - to be stubbed
@@ -60,10 +52,8 @@ describe('Integration: Component: gh-image-uploader', function() {
     let server;
 
     beforeEach(function () {
-        this.register('service:config', configStub);
         this.register('service:session', sessionStub);
         this.register('service:notifications', notificationsStub);
-        this.inject.service('config', {as: 'configService'});
         this.inject.service('session', {as: 'sessionService'});
         this.inject.service('notifications', {as: 'notifications'});
         this.set('update', function () {});
@@ -80,53 +70,6 @@ describe('Integration: Component: gh-image-uploader', function() {
         expect(this.$()).to.have.length(1);
     });
 
-    it('defaults to upload form', function () {
-        this.render(hbs`{{gh-image-uploader image=image}}`);
-        expect(this.$('input[type="file"]').length).to.equal(1);
-    });
-
-    it('defaults to url form with no filestorage config', function () {
-        this.set('configService.fileStorage', false);
-        this.render(hbs`{{gh-image-uploader image=image}}`);
-        expect(this.$('input[type="file"]').length).to.equal(0);
-        expect(this.$('input[type="text"].url').length).to.equal(1);
-    });
-
-    it('can switch between form types', function () {
-        this.render(hbs`{{gh-image-uploader image=image}}`);
-        expect(this.$('input[type="file"]').length).to.equal(1);
-        expect(this.$('input[type="text"].url').length).to.equal(0);
-
-        this.$('a.image-url').click();
-
-        expect(this.$('input[type="file"]').length, 'upload form is visible after switch to url form')
-            .to.equal(0);
-        expect(this.$('input[type="text"].url').length, 'url form is visible after switch to url form')
-            .to.equal(1);
-
-        this.$('a.image-upload').click();
-
-        expect(this.$('input[type="file"]').length, 'upload form is visible after switch to upload form')
-            .to.equal(1);
-        expect(this.$('input[type="text"].url').length, 'url form is visible after switch to upload form')
-            .to.equal(0);
-    });
-
-    it('triggers formChanged action when switching between forms', function () {
-        let formChanged = sinon.spy();
-        this.set('formChanged', formChanged);
-
-        this.render(hbs`{{gh-image-uploader image=image formChanged=(action formChanged)}}`);
-
-        this.$('a.image-url').click();
-        this.$('a.image-upload').click();
-
-        expect(formChanged.calledTwice).to.be.true;
-        expect(formChanged.firstCall.args[0]).to.equal('url-input');
-        expect(formChanged.secondCall.args[0]).to.equal('upload');
-    });
-
-    describe('file upload form', function () {
     it('renders form with supplied alt text', function () {
         this.render(hbs`{{gh-image-uploader image=image altText="text test"}}`);
         expect(this.$('.description').text().trim()).to.equal('Upload image of "text test"');
@@ -510,68 +453,4 @@ describe('Integration: Component: gh-image-uploader', function() {
             done();
         });
     });
-    });
-
-    describe('URL input form', function () {
-        beforeEach(function () {
-            this.set('configService.fileStorage', false);
-        });
-
-        it('displays save button by default', function () {
-            this.set('image', 'http://example.com/test.png');
-            this.render(hbs`{{gh-image-uploader image=image text="text test"}}`);
-            expect(this.$('button').length).to.equal(1);
-            expect(this.$('input[type="text"]').val()).to.equal('http://example.com/test.png');
-        });
-
-        it('can render without a save button', function () {
-            this.render(hbs`{{gh-image-uploader image=image saveButton=false text="text test"}}`);
-            expect(this.$('button').length).to.equal(0);
-            expect(this.$('.description').text().trim()).to.equal('text test');
-        });
-
-        it('fires update action when save button clicked', function () {
-            let update = sinon.spy();
-            this.set('update', update);
-
-            this.render(hbs`{{gh-image-uploader image=image update=(action update)}}`);
-
-            this.$('input[type="text"]').val('saved url');
-            this.$('input[type="text"]').change();
-            this.$('button.gh-btn-blue').click();
-
-            expect(update.calledOnce).to.be.true;
-            expect(update.firstCall.args[0]).to.equal('saved url');
-        });
-
-        it('fires onInput action when typing URL', function () {
-            let onInput = sinon.spy();
-            this.set('onInput', onInput);
-
-            this.render(hbs`{{gh-image-uploader image=image onInput=(action onInput)}}`);
-
-            this.$('input[type="text"]').val('input url');
-            this.$('input[type="text"]').change();
-
-            expect(onInput.calledOnce).to.be.true;
-            expect(onInput.firstCall.args[0]).to.equal('input url');
-        });
-
-        it('saves on enter key', function () {
-            let update = sinon.spy();
-            this.set('update', update);
-
-            this.render(hbs`{{gh-image-uploader image=image update=(action update)}}`);
-
-            this.$('input[type="text"]').val('saved url');
-            this.$('input[type="text"]').change();
-            this.$('input[type="text"]').trigger(
-                // eslint-disable-next-line new-cap
-                $.Event('keyup', {keyCode: keyCodes.enter, which: keyCodes.enter})
-            );
-
-            expect(update.calledOnce).to.be.true;
-            expect(update.firstCall.args[0]).to.equal('saved url');
-        });
-    });
 });

ghost/admin/tests/integration/components/gh-profile-image-test.js

@@ -61,17 +61,6 @@ describe('Integration: Component: gh-profile-image', function () {
         expect(this.$()).to.have.length(1);
     });
 
-    it('renders and tears down ok with fileStorage:false', function () {
-        this.set('fileStorage', false);
-
-        this.render(hbs`
-            {{gh-profile-image fileStorage=fileStorage}}
-        `);
-
-        expect(this.$()).to.have.length(1);
-        expect(this.$('input')).to.have.length(0);
-    }),
-
     it('renders default image if no email supplied', function () {
         this.set('email', null);