🔥 remove URL input option from image upload components

refs TryGhost/Ghost#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
TryGhost · Mar 3, 2017 · 89776fb · 89776fb
1 parent c9dfc56
commit 89776fb
Show file tree

Hide file tree

Showing 18 changed files with 293 additions and 615 deletions.
diff --git a/app/components/gh-image-uploader-with-preview.js b/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');
         }

diff --git a/app/components/gh-image-uploader.js b/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,32 +99,21 @@ export default Component.extend({
         event.stopPropagation();
         event.preventDefault();
 
-        if (showUploadForm) {
-            this.set('dragClass', '-drag-over');
-        }
+        this.set('dragClass', '-drag-over');
     },
 
     dragLeave(event) {
-        let showUploadForm = this.get('showUploadForm');
-
         event.preventDefault();
-
-        if (showUploadForm) {
-            this.set('dragClass', null);
-        }
+        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);
-            }
+        if (event.dataTransfer.files) {
+            this.send('fileSelected', event.dataTransfer.files);
         }
     },
 
@@ -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);

diff --git a/app/components/gh-profile-image.js b/app/components/gh-profile-image.js
@@ -29,7 +29,6 @@ export default Component.extend({
 
     validEmail: '',
     hasUploadedImage: false,
-    fileStorage: true,
     ajax: AjaxService.create(),
 
     config: injectService(),

diff --git a/app/styles/components/uploader.css b/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;

diff --git a/app/templates/components/gh-ed-preview.hbs b/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
-            formChanged=(action "updateHeight")}}
+            uploadFinished=uploadFinished}}
     {{/ember-wormhole}}
 {{/each}}
diff --git a/app/templates/components/gh-image-uploader-with-preview.hbs b/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}}
diff --git a/app/templates/components/gh-image-uploader.hbs b/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}}
+    {{!-- 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}}
diff --git a/app/templates/components/gh-profile-image.hbs b/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>
diff --git a/app/templates/components/modals/upload-image.hbs b/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}}

diff --git a/app/templates/settings/general.hbs b/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}}

diff --git a/app/templates/setup/two.hbs b/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">

diff --git a/app/templates/signup.hbs b/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>

diff --git a/app/templates/team/user.hbs b/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}}