diff --git a/app/assets/javascripts/discourse/app/components/images-uploader.hbs b/app/assets/javascripts/admin/addon/components/images-uploader.hbs
similarity index 64%
rename from app/assets/javascripts/discourse/app/components/images-uploader.hbs
rename to app/assets/javascripts/admin/addon/components/images-uploader.hbs
index 3200fb1d162..6c4d98cefcf 100644
--- a/app/assets/javascripts/discourse/app/components/images-uploader.hbs
+++ b/app/assets/javascripts/admin/addon/components/images-uploader.hbs
@@ -5,13 +5,15 @@
>
{{d-icon "far-image"}} {{this.uploadButtonText}}
{{#if this.uploadingOrProcessing}}
- {{i18n "upload_selector.uploading"}} {{this.uploadProgress}}%
+ {{i18n "upload_selector.uploading"}}
+ {{this.uppyUpload.uploadProgress}}%
{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/addon/components/images-uploader.js b/app/assets/javascripts/admin/addon/components/images-uploader.js
new file mode 100644
index 00000000000..7c1ff3f6195
--- /dev/null
+++ b/app/assets/javascripts/admin/addon/components/images-uploader.js
@@ -0,0 +1,27 @@
+import Component from "@ember/component";
+import { getOwner } from "@ember/owner";
+import { tagName } from "@ember-decorators/component";
+import UppyUpload from "discourse/lib/uppy/uppy-upload";
+import I18n from "discourse-i18n";
+
+@tagName("span")
+export default class ImagesUploader extends Component {
+ uppyUpload = new UppyUpload(getOwner(this), {
+ id: "images-uploader",
+ type: "avatar",
+ validateUploadedFilesOptions: {
+ imagesOnly: true,
+ },
+ uploadDone: (upload) => {
+ this.done(upload);
+ },
+ });
+
+ get uploadingOrProcessing() {
+ return this.uppyUpload.uploading || this.uppyUpload.processing;
+ }
+
+ get uploadButtonText() {
+ return this.uploadingOrProcessing ? I18n.t("uploading") : I18n.t("upload");
+ }
+}
diff --git a/app/assets/javascripts/discourse/app/components/images-uploader.js b/app/assets/javascripts/discourse/app/components/images-uploader.js
deleted file mode 100644
index 3d0e93201d2..00000000000
--- a/app/assets/javascripts/discourse/app/components/images-uploader.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Component from "@ember/component";
-import { tagName } from "@ember-decorators/component";
-import UppyUploadMixin from "discourse/mixins/uppy-upload";
-import discourseComputed from "discourse-common/utils/decorators";
-import I18n from "discourse-i18n";
-
-@tagName("span")
-export default class ImagesUploader extends Component.extend(UppyUploadMixin) {
- type = "avatar";
-
- @discourseComputed("uploadingOrProcessing")
- uploadButtonText(uploadingOrProcessing) {
- return uploadingOrProcessing ? I18n.t("uploading") : I18n.t("upload");
- }
-
- validateUploadedFilesOptions() {
- return { imagesOnly: true };
- }
-
- uploadDone(upload) {
- this.done(upload);
- }
-}