From cb8f8e2410a96c4bfa7d1b6377c7af0a053e96d5 Mon Sep 17 00:00:00 2001
From: Angus McLeod <angus@mcleod.org.au>
Date: Sat, 15 Sep 2018 16:21:02 +1000
Subject: [PATCH] save whole file object and show filename

---
 .../components/wizard-field-upload.js.es6     | 10 +++++-----
 .../components/wizard-field-upload.hbs        | 10 ++++++++--
 assets/stylesheets/wizard/wizard_custom.scss  | 19 +++++++++++++++++++
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/assets/javascripts/wizard/components/wizard-field-upload.js.es6 b/assets/javascripts/wizard/components/wizard-field-upload.js.es6
index b7bc9868..f7f82faf 100644
--- a/assets/javascripts/wizard/components/wizard-field-upload.js.es6
+++ b/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.set("uploading", false);
+      this.setProperties({
+        "field.value": response.result,
+        "uploading": false
+      });
     });
 
     $upload.on("fileuploadfail", (e, response) => {
diff --git a/assets/javascripts/wizard/templates/components/wizard-field-upload.hbs b/assets/javascripts/wizard/templates/components/wizard-field-upload.hbs
index 42414a54..4d984912 100644
--- a/assets/javascripts/wizard/templates/components/wizard-field-upload.hbs
+++ b/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}}
diff --git a/assets/stylesheets/wizard/wizard_custom.scss b/assets/stylesheets/wizard/wizard_custom.scss
index d0f58475..93989e00 100644
--- a/assets/stylesheets/wizard/wizard_custom.scss
+++ b/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;
   }