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.js

@@ -0,0 +1,91 @@
+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 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 {
+  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;
+
+  group = "default";
+  emojiGroups = null;
+  newEmojiGroups = null;
+  tagName = null;
+
+  didReceiveAttrs() {
+    super.didReceiveAttrs(...arguments);
+    this.set("newEmojiGroups", this.emojiGroups);
+  }
+
+  @action
+  createEmojiGroup(group) {
+    let newEmojiGroups = this.newEmojiGroups;
+    if (group !== DEFAULT_GROUP) {
+      newEmojiGroups = this.emojiGroups.concat([group]).uniq();
+    }
+    this.setProperties({
+      newEmojiGroups,
+      group,
+    });
+  }
+
+  @action
+  chooseFiles() {
+    this.uppyUpload.openPicker();
+  }
+
+  @discourseComputed("uppyUpload.uploading", "uppyUpload.uploadProgress")
+  buttonLabel(uploading, uploadProgress) {
+    if (uploading) {
+      return `${I18n.t("admin.emoji.uploading")} ${uploadProgress}%`;
+    } else {
+      return I18n.t("admin.emoji.add");
+    }
+  }
+
+  @discourseComputed("uppyUpload.uploading")
+  buttonIcon(uploading) {
+    if (uploading) {
+      return "spinner";
+    } else {
+      return "plus";
+    }
+  }
+}