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,4 +1,3 @@
-{{#conditional-loading-section isLoading=uploading}}
 <div class="emoji-uploader">
   <div class="control">
     <span class="label">
@@ -34,8 +33,13 @@
   <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"}}
-          {{i18n "admin.emoji.add"}}
+          <span>{{i18n "admin.emoji.add"}}</span>
+        {{/if}}
         <input
           class="hidden-upload-field"
           disabled={{addDisabled}}
@@ -45,4 +49,3 @@
     </div>
   </div>
 </div>
-{{/conditional-loading-section}}

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"