FIX: Do not destroy $.fileupload element (#9888)

conditional-loading-section component rerendered the <input> element
and lost the necessary event handlers for jQuery-File-Upload.

app/assets/javascripts/discourse/app/components/emoji-uploader.js

@@ -1,4 +1,4 @@
-import { notEmpty, not } from "@ember/object/computed";
+import { notEmpty } from "@ember/object/computed";
 import { action } from "@ember/object";
 import Component from "@ember/component";
 import discourseComputed from "discourse-common/utils/decorators";
@@ -11,7 +11,6 @@ export default Component.extend(UploadMixin, {
   uploadUrl: "/admin/customize/emojis",
   hasName: notEmpty("name"),
   hasGroup: notEmpty("group"),
-  addDisabled: not("hasName"),
   group: "default",
   emojiGroups: null,
   newEmojiGroups: null,
@@ -23,6 +22,11 @@ export default Component.extend(UploadMixin, {
     this.set("newEmojiGroups", this.emojiGroups);
   },
 
+  @discourseComputed("hasName", "uploading")
+  addDisabled() {
+    return !this.hasName || this.uploading;
+  },
+
   uploadOptions() {
     return { sequentialUploads: true };
   },

app/assets/javascripts/discourse/app/mixins/upload.js

@@ -39,8 +39,10 @@ export default Mixin.create({
 
   _initialize: on("didInsertElement", function() {
     const $upload = $(this.element);
-    const reset = () =>
+    const reset = () => {
       this.setProperties({ uploading: false, uploadProgress: 0 });
+      document.getElementsByClassName("hidden-upload-field")[0].value = "";
+    };
     const maxFiles = this.getWithDefault(
       "maxFiles",
       this.siteSettings.simultaneous_uploads

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

@@ -1,48 +1,51 @@
-{{#conditional-loading-section isLoading=uploading}}
-  <div class="emoji-uploader">
-    <div class="control">
-      <span class="label">
-        {{i18n "admin.emoji.name"}}
-      </span>
-      <div class="input">
-        {{input
-          name="name"
-          placeholderKey="admin.emoji.name"
-          value=(readonly name)
-          input=(action (mut name) value="target.value")
-        }}
-      </div>
-    </div>
-    <div class="control">
-      <span class="label">
-        {{i18n "admin.emoji.group"}}
-      </span>
-      <div class="input">
-        {{combo-box
-          name="group"
-          value=group
-          content=newEmojiGroups
-          onChange=(action "createEmojiGroup")
-          valueProperty=null
-          nameProperty=null
-          options=(hash
-            allowAny=true
-          )
-        }}
-      </div>
-    </div>
-    <div class="control">
-      <div class="input">
-        <label class="btn btn-default btn-primary {{if addDisabled "disabled"}}">
-          {{d-icon "plus"}}
-          {{i18n "admin.emoji.add"}}
-          <input
-            class="hidden-upload-field"
-            disabled={{addDisabled}}
-            type="file"
-            accept=".png,.gif">
-        </label>
-      </div>
+<div class="emoji-uploader">
+  <div class="control">
+    <span class="label">
+      {{i18n "admin.emoji.name"}}
+    </span>
+    <div class="input">
+      {{input
+        name="name"
+        placeholderKey="admin.emoji.name"
+        value=(readonly name)
+        input=(action (mut name) value="target.value")
+      }}
     </div>
   </div>
-{{/conditional-loading-section}}
+  <div class="control">
+    <span class="label">
+      {{i18n "admin.emoji.group"}}
+    </span>
+    <div class="input">
+      {{combo-box
+        name="group"
+        value=group
+        content=newEmojiGroups
+        onChange=(action "createEmojiGroup")
+        valueProperty=null
+        nameProperty=null
+        options=(hash
+          allowAny=true
+        )
+      }}
+    </div>
+  </div>
+  <div class="control">
+    <div class="input">
+      <label class="btn btn-default btn-primary {{if addDisabled "disabled"}}">
+        {{#if uploading}}
+          {{d-icon "spinner" class="loading-icon"}}
+          <span>{{i18n "admin.emoji.uploading"}}</span>
+        {{else}}
+          {{d-icon "plus"}}
+          <span>{{i18n "admin.emoji.add"}}</span>
+        {{/if}}
+        <input
+          class="hidden-upload-field"
+          disabled={{addDisabled}}
+          type="file"
+          accept=".png,.gif">
+      </label>
+    </div>
+  </div>
+</div>

config/locales/client.en.yml

@@ -4673,6 +4673,7 @@ en:
         title: "Emoji"
         help: "Add new emoji that will be available to everyone. (PROTIP: drag & drop multiple files at once)"
         add: "Add New Emoji"
+        uploading: "Uploading..."
         name: "Name"
         group: "Group"
         image: "Image"