Upload Logos Step

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

@@ -0,0 +1,31 @@
+import { getToken } from 'wizard/lib/ajax';
+
+export default Ember.Component.extend({
+  classNames: ['wizard-image-row'],
+
+  uploading: false,
+
+  didInsertElement() {
+    this._super();
+
+    const $upload = this.$();
+
+    const id = this.get('field.id');
+
+    $upload.fileupload({
+      url: "/uploads.json",
+      formData: { synchronous: true,
+                  type: `wizard_${id}`,
+                  authenticity_token: getToken() },
+      dataType: 'json',
+      dropZone: $upload,
+    });
+
+    $upload.on("fileuploadsubmit", () => this.set('uploading', true));
+
+    $upload.on('fileuploaddone', (e, response) => {
+      this.set('field.value', response.result.url);
+      this.set('uploading', false);
+    });
+  },
+});

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

@@ -1,10 +1,13 @@
 import computed from 'ember-addons/ember-computed-decorators';
 
 export default Ember.Component.extend({
-  classNameBindings: [':wizard-field', ':text-field', 'field.invalid'],
+  classNameBindings: [':wizard-field', 'typeClass', 'field.invalid'],
+
+  @computed('field.type')
+  typeClass: type => `${Ember.String.dasherize(type)}-field`,
 
   @computed('field.id')
-  inputClassName: id => `field-${Ember.String.dasherize(id)}`,
+  fieldClass: id => `field-${Ember.String.dasherize(id)}`,
 
   @computed('field.type', 'field.id')
   inputComponentName(type, id) {

app/assets/javascripts/wizard/lib/ajax.js.es6

@@ -1,16 +1,17 @@
 
 let token;
 
-export function ajax(args) {
-
+export function getToken() {
   if (!token) {
     token = $('meta[name="csrf-token"]').attr('content');
   }
 
+  return token;
+}
+
+export function ajax(args) {
   return new Ember.RSVP.Promise((resolve, reject) => {
-    args.headers = {
-      'X-CSRF-Token': token
-    };
+    args.headers = { 'X-CSRF-Token': getToken() };
     args.success = data => Ember.run(null, resolve, data);
     args.error = xhr => Ember.run(null, reject, xhr);
     Ember.$.ajax(args);

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

@@ -1 +1 @@
-{{combo-box class=inputClassName value=field.value content=field.choices nameProperty="label" width="400px"}}
+{{combo-box class=fieldClass value=field.value content=field.choices nameProperty="label" width="400px"}}

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

@@ -0,0 +1,16 @@
+<label class="wizard-btn wizard-btn-upload {{if uploading 'disabled'}}">
+  {{#if uploading}}
+    {{i18n "wizard.uploading"}}
+  {{else}}
+    {{i18n "wizard.upload"}}
+    {{fa-icon "picture-o"}}
+  {{/if}}
+
+  <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-field-text.hbs

@@ -1 +1 @@
-{{input value=field.value class=inputClassName placeholder=field.placeholder}}
+{{input value=field.value class=fieldClass placeholder=field.placeholder}}

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

@@ -1,15 +1,16 @@
 <label>
   <span class='label-value'>{{field.label}}</span>
 
+  {{#if field.description}}
+    <div class='field-description'>{{{field.description}}}</div>
+  {{/if}}
+
   <div class='input-area'>
-    {{component inputComponentName field=field step=step inputClassName=inputClassName}}
+    {{component inputComponentName field=field step=step fieldClass=fieldClass}}
   </div>
 
   {{#if field.errorDescription}}
     <div class='field-error-description'>{{field.errorDescription}}</div>
   {{/if}}
 
-  {{#if field.description}}
-    <div class='field-description'>{{field.description}}</div>
-  {{/if}}
 </label>