fix image uploader text handling (again) (#140)

closes TryGhost/Ghost#7127
- image uploader now handles "text" and "alt text" differently

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

@@ -20,6 +20,7 @@ export default Component.extend({
 
     image: null,
     text: '',
+    altText: '',
     saveButton: true,
 
     dragClass: null,
@@ -44,6 +45,12 @@ export default Component.extend({
         return formData;
     }),
 
+    description: computed('text', 'altText', function () {
+        let altText = this.get('altText');
+
+        return this.get('text') || (altText ? `Upload image of "${altText}"` : 'Upload an image');
+    }),
+
     progressStyle: computed('uploadPercentage', function () {
         let percentage = this.get('uploadPercentage');
         let width = '';

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

@@ -4,7 +4,7 @@
     {{#ember-wormhole to=uploader.destinationElementId}}
         {{gh-image-uploader-with-preview
             image=uploader.src
-            text=uploader.altText
+            altText=uploader.altText
             update=(action "updateImageSrc" uploader.index)
             remove=(action "updateImageSrc" uploader.index "")
             uploadStarted=uploadStarted

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

@@ -8,9 +8,11 @@
 {{else}}
     {{gh-image-uploader
         text=text
+        altText=altText
         update=(action 'update')
         onInput=(action 'onInput')
         uploadStarted=(action 'uploadStarted')
         uploadFinished=(action 'uploadFinished')
-        formChanged=(action 'formChanged')}}
+        formChanged=(action 'formChanged')
+    }}
 {{/if}}

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

@@ -15,8 +15,8 @@
     {{#if showUploadForm}}
         {{!-- file selection/drag-n-drop  --}}
         <div class="upload-form">
-            {{#gh-file-input multiple=false alt=text action=(action 'fileSelected') accept="image/gif,image/jpg,image/jpeg,image/png,image/svg+xml"}}
+            {{#gh-file-input multiple=false alt=description action=(action 'fileSelected') accept="image/gif,image/jpg,image/jpeg,image/png,image/svg+xml"}}
-                <div class="description">{{if text (concat "Upload image of " text) "Upload an image"}}</div>
+                <div class="description">{{description}}</div>
             {{/gh-file-input}}
         </div>
 
@@ -30,7 +30,7 @@
             {{#if saveButton}}
                 <button class="btn btn-blue gh-input" {{action 'saveUrl'}}>Save</button>
             {{else}}
-                <div class="description">{{if text (concat "Upload image of " text) "Upload an image"}}</div>
+                <div class="description">{{description}}</div>
             {{/if}}
         </form>
 

ghost/admin/app/templates/post-settings-menu.hbs

@@ -10,7 +10,8 @@
                 image=model.image
                 text="Add post image"
                 update=(action "setCoverImage")
-                remove=(action "clearCoverImage")}}
+                remove=(action "clearCoverImage")
+            }}
             <form>
             <div class="form-group">
                 <label for="url">Post URL</label>

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

@@ -130,9 +130,14 @@ describeComponent(
         });
 
         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"');
+            });
+
             it('renders form with supplied text', function () {
                 this.render(hbs`{{gh-image-uploader image=image text="text test"}}`);
-                expect(this.$('.description').text().trim()).to.equal('Upload image of text test');
+                expect(this.$('.description').text().trim()).to.equal('text test');
             });
 
             it('generates request to correct endpoint', function (done) {
@@ -433,7 +438,7 @@ describeComponent(
             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('Upload image of text test');
+                expect(this.$('.description').text().trim()).to.equal('text test');
             });
 
             it('fires update action when save button clicked', function () {