DEV: Update emoji-uploader uppy usage (#29340)

Also moves this component to the admin bundle. It is only used in the admin panel, and has dependencies on admin-specific i18n strings.

app/assets/javascripts/admin/addon/components/emoji-uploader.hbs

@@ -33,8 +33,9 @@
   <div class="control-group">
     <div class="input">
       <input
+        {{did-insert this.uppyUpload.setup}}
         class="hidden-upload-field"
-        disabled={{this.uploading}}
+        disabled={{this.uppyUpload.uploading}}
         type="file"
         multiple="true"
         accept=".png,.gif"
@@ -43,7 +44,7 @@
         @translatedLabel={{this.buttonLabel}}
         @icon="plus"
         @action={{this.chooseFiles}}
-        @disabled={{this.uploading}}
+        @disabled={{this.uppyUpload.uploading}}
         class="btn-primary"
       />
     </div>

app/assets/javascripts/admin/addon/components/emoji-uploader.js

@@ -1,16 +1,45 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
 import { notEmpty } from "@ember/object/computed";
+import { getOwner } from "@ember/owner";
 import { isEmpty } from "@ember/utils";
-import UppyUploadMixin from "discourse/mixins/uppy-upload";
+import UppyUpload from "discourse/lib/uppy/uppy-upload";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
-
 const DEFAULT_GROUP = "default";
 
-export default class EmojiUploader extends Component.extend(UppyUploadMixin) {
-  type = "emoji";
-  uploadUrl = "/admin/customize/emojis";
+export default class EmojiUploader extends Component {
+  uppyUpload = new UppyUpload(getOwner(this), {
+    id: "emoji-uploader",
+    type: "emoji",
+    uploadUrl: "/admin/customize/emojis",
+    preventDirectS3Uploads: true,
+    validateUploadedFilesOptions: {
+      imagesOnly: true,
+    },
+
+    perFileData: () => {
+      const payload = {};
+
+      if (!isEmpty(this.name)) {
+        payload.name = this.name;
+
+        // if uploading multiple files, we can't use the name for every emoji
+        this.set("name", null);
+      }
+
+      if (!isEmpty(this.group) && this.group !== DEFAULT_GROUP) {
+        payload.group = this.group;
+      }
+
+      return payload;
+    },
+
+    uploadDone: (upload) => {
+      this.done(upload, this.group);
+      this.set("name", null);
+    },
+  });
 
   @notEmpty("name") hasName;
   @notEmpty("group") hasGroup;
@@ -19,7 +48,6 @@ export default class EmojiUploader extends Component.extend(UppyUploadMixin) {
   emojiGroups = null;
   newEmojiGroups = null;
   tagName = null;
-  preventDirectS3Uploads = true;
 
   didReceiveAttrs() {
     super.didReceiveAttrs(...arguments);
@@ -38,38 +66,12 @@ export default class EmojiUploader extends Component.extend(UppyUploadMixin) {
     });
   }
 
-  _perFileData() {
-    const payload = {};
-
-    if (!isEmpty(this.name)) {
-      payload.name = this.name;
-
-      // if uploading multiple files, we can't use the name for every emoji
-      this.set("name", null);
-    }
-
-    if (!isEmpty(this.group) && this.group !== DEFAULT_GROUP) {
-      payload.group = this.group;
-    }
-
-    return payload;
-  }
-
-  validateUploadedFilesOptions() {
-    return { imagesOnly: true };
-  }
-
-  uploadDone(upload) {
-    this.done(upload, this.group);
-    this.set("name", null);
-  }
-
   @action
   chooseFiles() {
-    this.fileInputEl.click();
+    this.uppyUpload.openPicker();
   }
 
-  @discourseComputed("uploading", "uploadProgress")
+  @discourseComputed("uppyUpload.uploading", "uppyUpload.uploadProgress")
   buttonLabel(uploading, uploadProgress) {
     if (uploading) {
       return `${I18n.t("admin.emoji.uploading")} ${uploadProgress}%`;
@@ -78,7 +80,7 @@ export default class EmojiUploader extends Component.extend(UppyUploadMixin) {
     }
   }
 
-  @discourseComputed("uploading")
+  @discourseComputed("uppyUpload.uploading")
   buttonIcon(uploading) {
     if (uploading) {
       return "spinner";

app/assets/javascripts/admin/addon/templates/emojis.hbs

@@ -15,7 +15,6 @@
   <EmojiUploader
     @emojiGroups={{this.emojiGroups}}
     @done={{action "emojiUploaded"}}
-    @id="emoji-uploader"
   />
 
   <hr />