From 30eb00ac2015b450b803a0cefa200dd3d0b7ee73 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Wed, 23 Oct 2024 10:08:09 +0100
Subject: [PATCH] DEV: Update images-uploader uppy usage (#29341)

Also moves this component to the admin bundle. It is only used in the admin panel, and has dependencies on admin-specific i18n strings.
---
 .../addon}/components/images-uploader.hbs     |  6 +++--
 .../admin/addon/components/images-uploader.js | 27 +++++++++++++++++++
 .../app/components/images-uploader.js         | 23 ----------------
 3 files changed, 31 insertions(+), 25 deletions(-)
 rename app/assets/javascripts/{discourse/app => admin/addon}/components/images-uploader.hbs (64%)
 create mode 100644 app/assets/javascripts/admin/addon/components/images-uploader.js
 delete mode 100644 app/assets/javascripts/discourse/app/components/images-uploader.js

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"}}&nbsp;{{this.uploadButtonText}}
   <input
+    {{did-insert this.uppyUpload.setup}}
     class="hidden-upload-field"
-    disabled={{this.uploading}}
+    disabled={{this.uppyUpload.uploading}}
     type="file"
     accept="image/*"
     multiple
   />
 </label>
 {{#if this.uploadingOrProcessing}}
-  <span>{{i18n "upload_selector.uploading"}} {{this.uploadProgress}}%</span>
+  <span>{{i18n "upload_selector.uploading"}}
+    {{this.uppyUpload.uploadProgress}}%</span>
 {{/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);
-  }
-}