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); - } -}