UX: Allow users to see filename in image-uploader component. (#7022)

https://meta.discourse.org/t/downsides-of-the-new-logo-ui-in-site-settings/102247/23?u=tgxworld

app/assets/javascripts/discourse/components/image-uploader.js.es6

@@ -3,6 +3,7 @@ import UploadMixin from "discourse/mixins/upload";
 
 export default Ember.Component.extend(UploadMixin, {
   classNames: ["image-uploader"],
+  infoHidden: true,
 
   @computed("imageUrl")
   backgroundStyle(imageUrl) {
@@ -13,6 +14,17 @@ export default Ember.Component.extend(UploadMixin, {
     return `background-image: url(${imageUrl})`.htmlSafe();
   },
 
+  @computed("imageUrl")
+  imageBaseName(imageUrl) {
+    if (Ember.isEmpty(imageUrl)) return;
+    return imageUrl.split("/").slice(-1)[0];
+  },
+
+  @computed("infoHidden", "imageBaseName")
+  showInfo(infoHidden, imageBaseName) {
+    return !infoHidden && imageBaseName;
+  },
+
   @computed("backgroundStyle")
   hasBackgroundStyle(backgroundStyle) {
     return !Ember.isEmpty(backgroundStyle.string);
@@ -31,6 +43,10 @@ export default Ember.Component.extend(UploadMixin, {
   },
 
   actions: {
+    toggleInfo() {
+      this.toggleProperty("infoHidden");
+    },
+
     trash() {
       this.setProperties({ imageUrl: null, imageId: null });
 

app/assets/javascripts/discourse/templates/components/image-uploader.hbs

@@ -4,9 +4,23 @@
       {{d-icon "far-image"}}
       <input class="hidden-upload-field" disabled={{uploading}} type="file" accept="image/*" />
     </label>
+
     {{#if hasBackgroundStyle}}
       <button {{action "trash"}} class="btn btn-danger pad-left no-text">{{d-icon "far-trash-alt"}}</button>
     {{/if}}
+
+    {{#if imageBaseName}}
+      {{d-button icon="info-circle" class="btn image-uploader-info-btn no-text"
+                                    title="upload_selector.filename"
+                                    action=(action "toggleInfo")}}
+    {{/if}}
+
     <span class="btn {{unless uploading 'hidden'}}">{{i18n 'upload_selector.uploading'}} {{uploadProgress}}%</span>
   </div>
+
+  {{#if showInfo}}
+    <div class="image-uploader-info">
+      <a href={{imageUrl}} target="_blank">{{imageBaseName}}</a>
+    </div>
+  {{/if}}
 </div>

app/assets/stylesheets/common/base/upload.scss

@@ -1,6 +1,53 @@
 .uploaded-image-preview {
   background: $primary center;
   background-size: cover;
+  position: relative;
+
+  .image-uploader-info {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background: $primary;
+    text-align: center;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    opacity: 0.6;
+
+    a {
+      color: $secondary;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .image-upload-controls {
+    display: flex;
+
+    .btn {
+      margin-right: 5px;
+    }
+
+    .image-uploader-info-btn {
+      background: none;
+      margin-right: 0;
+      margin-left: auto;
+
+      .d-icon {
+        color: $primary-low;
+      }
+
+      &:hover {
+        background: none;
+
+        .d-icon {
+          color: $primary;
+        }
+      }
+    }
+  }
 }
 
 .image-uploader.no-repeat {

app/assets/stylesheets/desktop/user.scss

@@ -332,8 +332,5 @@
   .image-upload-controls {
     display: flex;
     align-items: center;
-    .btn {
-      margin-right: 5px;
-    }
   }
 }

config/locales/client.en.yml

@@ -1569,6 +1569,7 @@ en:
       select_file: "Select File"
       image_link: "link your image will point to"
       default_image_alt_text: image
+      filename: "Filename"
 
     search:
       sort_by: "Sort by"

test/javascripts/components/image-uploader-test.js.es6

@@ -4,7 +4,7 @@ moduleForComponent("image-uploader", { integration: true });
 componentTest("with image", {
   template: "{{image-uploader imageUrl='/some/upload.png'}}",
 
-  test(assert) {
+  async test(assert) {
     assert.equal(
       this.$(".d-icon-far-image").length,
       1,
@@ -16,6 +16,20 @@ componentTest("with image", {
       1,
       "it displays the trash icon"
     );
+
+    assert.equal(
+      this.$(".image-uploader-info").length,
+      0,
+      "it does not display the image info"
+    );
+
+    await click(".image-uploader-info-btn");
+
+    assert.equal(
+      this.$(".image-uploader-info").length,
+      1,
+      "it displays the image info"
+    );
   }
 });
 
@@ -34,5 +48,11 @@ componentTest("without image", {
       0,
       "it does not display trash icon"
     );
+
+    assert.equal(
+      this.$(".image-uploader-info-btn").length,
+      0,
+      "it does not display the image info button toggle"
+    );
   }
 });