save whole file object and show filename

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

@@ -1,10 +1,8 @@
 import getUrl from "discourse-common/lib/get-url";
-import computed from "ember-addons/ember-computed-decorators";
 import { getToken } from "wizard/lib/ajax";
-import { getOwner } from "discourse-common/lib/get-owner";
 
 export default Ember.Component.extend({
-  classNames: ["wizard-image-row"],
+  classNames: ["wizard-field-upload"],
   uploading: false,
 
   didInsertElement() {
@@ -28,8 +26,10 @@ export default Ember.Component.extend({
     $upload.on("fileuploadsubmit", () => this.set("uploading", true));
 
     $upload.on("fileuploaddone", (e, response) => {
-      this.set("field.value", response.result.url);
+      this.setProperties({
-      this.set("uploading", false);
+        "field.value": response.result,
+        "uploading": false
+      });
     });
 
     $upload.on("fileuploadfail", (e, response) => {

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

@@ -1,10 +1,16 @@
-<label class="wizard-btn wizard-btn-upload {{if uploading 'disabled'}}">
+<label class="wizard-btn wizard-btn-upload-file {{if uploading 'disabled'}}">
   {{#if uploading}}
     {{i18n "wizard.uploading"}}
   {{else}}
     {{i18n "wizard.upload"}}
-    {{d-icon "picture-o"}}
+    {{d-icon "upload"}}
   {{/if}}
 
   <input disabled={{uploading}} type="file" accept="image/*,application/pdf" style="visibility: hidden; position: absolute;" />
 </label>
+
+{{#if field.value}}
+  <a href="{{field.value.url}}" class="filename">
+    {{field.value.original_filename}}
+  </a>
+{{/if}}

assets/stylesheets/wizard/wizard_custom.scss

@@ -218,6 +218,25 @@
     margin: 0;
   }
 
+  .wizard-field-upload {
+    .wizard-btn-upload-file {
+      display: inline-block;
+      position: relative;
+      cursor: pointer;
+
+      input {
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+      }
+    }
+
+    .filename {
+      margin-left: 10px;
+    }
+  }
+
   .wizard-column .wizard-field .input-area {
     margin: 0.5em 0;
   }