Wizard: Support for custom image previews for uploads

app/assets/javascripts/wizard/components/wizard-field-image.js.es6

@@ -1,10 +1,17 @@
+import computed from 'ember-addons/ember-computed-decorators';
 import { getToken } from 'wizard/lib/ajax';
 
 export default Ember.Component.extend({
   classNames: ['wizard-image-row'],
-
   uploading: false,
 
+  @computed('field.id')
+  previewComponent(id) {
+    const componentName = `image-preview-${Ember.String.dasherize(id)}`;
+    const exists = this.container.lookup(`component:${componentName}`);
+    return exists ? componentName : 'wizard-image-preview';
+  },
+
   didInsertElement() {
     this._super();
 

app/assets/javascripts/wizard/components/wizard-image-preview.js.es6

@@ -0,0 +1,3 @@
+export default Ember.Component.extend({
+  classNameBindings: [':wizard-image-preview', 'fieldClass']
+});

app/assets/javascripts/wizard/templates/components/wizard-field-image.hbs

@@ -1,3 +1,7 @@
+{{#if field.value}}
+  {{component previewComponent field=field fieldClass=fieldClass}}
+{{/if}}
+
 <label class="wizard-btn wizard-btn-upload {{if uploading 'disabled'}}">
   {{#if uploading}}
     {{i18n "wizard.uploading"}}
@@ -8,9 +12,3 @@
 
   <input disabled={{uploading}} type="file" accept="image/*" style="visibility: hidden; position: absolute;" />
 </label>
-
-{{#if field.value}}
-  <div class='wizard-image-preview {{fieldClass}}'>
-    <img src={{field.value}} class={{fieldClass}}>
-  </div>
-{{/if}}

app/assets/javascripts/wizard/templates/components/wizard-image-preview.hbs

@@ -0,0 +1 @@
+<img src={{field.value}} class={{fieldClass}}>