fix image component displaying alt text in uploader (#105)

closes TryGhost/Ghost#7064
- pull alt text from parsed markdown
- move text to image uploader component proper

ghost/admin/app/components/gh-ed-preview.js

@@ -67,22 +67,29 @@ export default Component.extend({
             let el = oldEl.cloneNode(true);
             let component = components[i];
             let uploadTarget = el.querySelector('.js-upload-target');
+            let altTextWrapper = oldEl.querySelector('.js-drop-zone .description strong');
             let id = uuid();
             let destinationElementId = `image-uploader-${id}`;
-            let src;
+            let src, altText;
 
             if (uploadTarget) {
                 src = uploadTarget.getAttribute('src');
             }
 
+            if (altTextWrapper) {
+                altText = altTextWrapper.innerHTML;
+            }
+
             if (component) {
                 component.set('destinationElementId', destinationElementId);
                 component.set('src', src);
+                component.set('altText', altText);
             } else {
                 let imageUpload = EmberObject.create({
                     destinationElementId,
                     id,
                     src,
+                    altText,
                     index: i
                 });
 

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

@@ -19,7 +19,7 @@ export default Component.extend({
     classNameBindings: ['dragClass'],
 
     image: null,
-    text: 'Upload an image',
+    text: '',
     saveButton: true,
 
     dragClass: null,

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="Upload an image"
+            text=uploader.altText
             update=(action "updateImageSrc" uploader.index)
             remove=(action "updateImageSrc" uploader.index "")
             uploadStarted=uploadStarted

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

@@ -16,7 +16,7 @@
         {{!-- 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"}}
-                <div class="description">{{text}}</div>
+                <div class="description">{{if text (concat "Upload image of " text) "Upload an image"}}</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">{{text}}</div>
+                <div class="description">{{if text (concat "Upload image of " text) "Upload an image"}}</div>
             {{/if}}
         </form>
 

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

@@ -7,10 +7,12 @@
             </a>
         </div>
     {{else}}
-        {{gh-image-uploader image=newUrl
-                            saveButton=false
-                            update=(action 'fileUploaded')
-                            onInput=(action (mut newUrl))}}
+        {{gh-image-uploader
+            image=newUrl
+            saveButton=false
+            update=(action 'fileUploaded')
+            onInput=(action (mut newUrl))
+        }}
     {{/if}}
 </div>
 

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

@@ -132,7 +132,7 @@ describeComponent(
         describe('file upload form', function () {
             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('text test');
+                expect(this.$('.description').text().trim()).to.equal('Upload image of text test');
             });
 
             it('generates request to correct endpoint', function (done) {
@@ -433,7 +433,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('text test');
+                expect(this.$('.description').text().trim()).to.equal('Upload image of text test');
             });
 
             it('fires update action when save button clicked', function () {