DEV: Modernize tags-uploader component (#29215)

app/assets/javascripts/admin/addon/components/tags-uploader.gjs

@@ -0,0 +1,52 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { getOwner } from "@ember/owner";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import { service } from "@ember/service";
+import concatClass from "discourse/helpers/concat-class";
+import UppyUpload from "discourse/lib/uppy/uppy-upload";
+import icon from "discourse-common/helpers/d-icon";
+import i18n from "discourse-common/helpers/i18n";
+
+export default class TagsUploader extends Component {
+  @service dialog;
+
+  uppyUpload = new UppyUpload(getOwner(this), {
+    type: "csv",
+    id: this.args.id,
+    uploadUrl: "/tags/upload",
+    uploadDone: this.uploadDone,
+    preventDirectS3Uploads: true,
+    validateUploadedFilesOptions: { csvOnly: true },
+  });
+
+  get addDisabled() {
+    return this.uppyUpload.uploading;
+  }
+
+  @action
+  uploadDone() {
+    this.args.closeModal();
+    this.args.refresh();
+    this.dialog.alert(i18n("tagging.upload_successful"));
+  }
+
+  <template>
+    <div id="tag-uploader">
+      <label
+        class={{concatClass "btn btn-default" (if this.addDisabled "disabled")}}
+      >
+        {{icon "upload"}}
+        {{i18n "admin.watched_words.form.upload"}}
+        <input
+          {{didInsert this.uppyUpload.setup}}
+          class="hidden-upload-field"
+          disabled={{this.addDisabled}}
+          type="file"
+          accept="text/plain,text/csv"
+        />
+      </label>
+      <span class="instructions">{{i18n "tagging.upload_instructions"}}</span>
+    </div>
+  </template>
+}

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

@@ -1,11 +0,0 @@
-<label class="btn btn-default {{if this.addDisabled 'disabled'}}">
-  {{d-icon "upload"}}
-  {{i18n "admin.watched_words.form.upload"}}
-  <input
-    class="hidden-upload-field"
-    disabled={{this.addDisabled}}
-    type="file"
-    accept="text/plain,text/csv"
-  />
-</label>
-<span class="instructions">{{i18n "tagging.upload_instructions"}}</span>

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

@@ -1,27 +0,0 @@
-import Component from "@ember/component";
-import { alias } from "@ember/object/computed";
-import { service } from "@ember/service";
-import UppyUploadMixin from "discourse/mixins/uppy-upload";
-import I18n from "discourse-i18n";
-
-export default class TagsUploader extends Component.extend(UppyUploadMixin) {
-  @service dialog;
-  type = "csv";
-
-  uploadUrl = "/tags/upload";
-
-  @alias("uploading") addDisabled;
-
-  elementId = "tag-uploader";
-  preventDirectS3Uploads = true;
-
-  validateUploadedFilesOptions() {
-    return { csvOnly: true };
-  }
-
-  uploadDone() {
-    this.closeModal();
-    this.refresh();
-    this.dialog.alert(I18n.t("tagging.upload_successful"));
-  }
-}