DEV: Update chat-composer-uploads uppy usage (#29339)

app/assets/javascripts/discourse/app/lib/uppy/uppy-upload.js

@@ -200,12 +200,10 @@ export default class UppyUpload {
       },
     });
 
-    if (this.config.uploadDropTargetOptions) {
+    const resolvedDropTargetOptions = this.#resolvedDropTargetOptions;
+    if (resolvedDropTargetOptions) {
       // DropTarget is a UI plugin, only preprocessors must call _useUploadPlugin
-      this.uppyWrapper.uppyInstance.use(
+      this.uppyWrapper.uppyInstance.use(DropTarget, resolvedDropTargetOptions);
-        DropTarget,
-        this.config.uploadDropTargetOptions
-      );
     }
 
     this.uppyWrapper.uppyInstance.on("progress", (progress) => {
@@ -533,6 +531,14 @@ export default class UppyUpload {
     }
   }
 
+  get #resolvedDropTargetOptions() {
+    if (typeof this.config.uploadDropTargetOptions === "function") {
+      return this.config.uploadDropTargetOptions();
+    } else {
+      return this.config.uploadDropTargetOptions;
+    }
+  }
+
   #reset() {
     this.uppyWrapper.uppyInstance?.cancelAll();
     Object.assign(this, {

plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.hbs

@@ -21,4 +21,5 @@
   @allowMultiple={{true}}
   @fileInputId={{this.fileUploadElementId}}
   @fileInputClass="hidden-upload-field"
+  @registerFileInput={{this.uppyUpload.setup}}
 />

plugins/chat/assets/javascripts/discourse/components/chat-composer-uploads.js

@@ -1,38 +1,74 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
+import { getOwner } from "@ember/owner";
 import { service } from "@ember/service";
 import { classNames } from "@ember-decorators/component";
+import UppyUpload from "discourse/lib/uppy/uppy-upload";
 import UppyMediaOptimization from "discourse/lib/uppy-media-optimization-plugin";
 import { clipboardHelpers } from "discourse/lib/utilities";
-import UppyUploadMixin from "discourse/mixins/uppy-upload";
 import { cloneJSON } from "discourse-common/lib/object";
-import discourseComputed, { bind } from "discourse-common/utils/decorators";
+import { bind } from "discourse-common/utils/decorators";
 
 @classNames("chat-composer-uploads")
-export default class ChatComposerUploads extends Component.extend(
+export default class ChatComposerUploads extends Component {
-  UppyUploadMixin
-) {
   @service mediaOptimizationWorker;
   @service chatStateManager;
 
-  id = "chat-composer-uploader";
+  uppyUpload = new UppyUpload(getOwner(this), {
-  type = "chat-composer";
+    id: "chat-composer-uploader",
+    type: "chat-composer",
+    useMultipartUploadsIfAvailable: true,
+
+    uppyReady: () => {
+      if (this.siteSettings.composer_media_optimization_image_enabled) {
+        this.uppyUpload.uppyWrapper.useUploadPlugin(UppyMediaOptimization, {
+          optimizeFn: (data, opts) =>
+            this.mediaOptimizationWorker.optimizeImage(data, opts),
+          runParallel: !this.site.isMobileDevice,
+        });
+      }
+
+      this.uppyUpload.uppyWrapper.onPreProcessProgress((file) => {
+        const inProgressUpload = this.inProgressUploads.findBy("id", file.id);
+        if (!inProgressUpload?.processing) {
+          inProgressUpload?.set("processing", true);
+        }
+      });
+
+      this.uppyUpload.uppyWrapper.onPreProcessComplete((file) => {
+        const inProgressUpload = this.inProgressUploads.findBy("id", file.id);
+        inProgressUpload?.set("processing", false);
+      });
+    },
+
+    uploadDone: (upload) => {
+      this.uploads.pushObject(upload);
+      this._triggerUploadsChanged();
+    },
+
+    uploadDropTargetOptions: () => ({
+      target: this.uploadDropZone || document.body,
+    }),
+
+    onProgressUploadsChanged: () => {
+      this._triggerUploadsChanged(this.uploads, {
+        inProgressUploadsCount: this.inProgressUploads?.length,
+      });
+    },
+  });
+
   existingUploads = null;
   uploads = null;
-  useMultipartUploadsIfAvailable = true;
   uploadDropZone = null;
 
-  init() {
+  get inProgressUploads() {
-    super.init(...arguments);
+    return this.uppyUpload.inProgressUploads;
-    this.setProperties({
-      fileInputSelector: `#${this.fileUploadElementId}`,
-    });
   }
 
   didReceiveAttrs() {
     super.didReceiveAttrs(...arguments);
     if (this.inProgressUploads?.length > 0) {
-      this._uppyInstance?.cancelAll();
+      this.uppyUpload.uppyWrapper.uppyInstance?.cancelAll();
     }
 
     this.set(
@@ -56,19 +92,13 @@ export default class ChatComposerUploads extends Component.extend(
     );
   }
 
-  uploadDone(upload) {
+  get showUploadsContainer() {
-    this.uploads.pushObject(upload);
+    return this.get("uploads.length") > 0 || this.inProgressUploads.length > 0;
-    this._triggerUploadsChanged();
-  }
-
-  @discourseComputed("uploads.length", "inProgressUploads.length")
-  showUploadsContainer(uploadsCount, inProgressUploadsCount) {
-    return uploadsCount > 0 || inProgressUploadsCount > 0;
   }
 
   @action
   cancelUploading(upload) {
-    this.appEvents.trigger(`upload-mixin:${this.id}:cancel-upload`, {
+    this.uppyUpload.cancelSingleUpload({
       fileId: upload.id,
     });
     this.removeUpload(upload);
@@ -80,34 +110,6 @@ export default class ChatComposerUploads extends Component.extend(
     this._triggerUploadsChanged();
   }
 
-  _uploadDropTargetOptions() {
-    return {
-      target: this.uploadDropZone || document.body,
-    };
-  }
-
-  _uppyReady() {
-    if (this.siteSettings.composer_media_optimization_image_enabled) {
-      this.uppyUpload.uppyWrapper.useUploadPlugin(UppyMediaOptimization, {
-        optimizeFn: (data, opts) =>
-          this.mediaOptimizationWorker.optimizeImage(data, opts),
-        runParallel: !this.site.isMobileDevice,
-      });
-    }
-
-    this.uppyUpload.uppyWrapper.onPreProcessProgress((file) => {
-      const inProgressUpload = this.inProgressUploads.findBy("id", file.id);
-      if (!inProgressUpload?.processing) {
-        inProgressUpload?.set("processing", true);
-      }
-    });
-
-    this.uppyUpload.uppyWrapper.onPreProcessComplete((file) => {
-      const inProgressUpload = this.inProgressUploads.findBy("id", file.id);
-      inProgressUpload?.set("processing", false);
-    });
-  }
-
   @bind
   _pasteEventListener(event) {
     if (document.activeElement !== this.composerInputEl) {
@@ -124,16 +126,12 @@ export default class ChatComposerUploads extends Component.extend(
     }
 
     if (event && event.clipboardData && event.clipboardData.files) {
-      this._addFiles([...event.clipboardData.files], { pasted: true });
+      this.uppyUpload.addFiles([...event.clipboardData.files], {
+        pasted: true,
+      });
     }
   }
 
-  onProgressUploadsChanged() {
-    this._triggerUploadsChanged(this.uploads, {
-      inProgressUploadsCount: this.inProgressUploads?.length,
-    });
-  }
-
   _triggerUploadsChanged() {
     this.onUploadChanged?.(this.uploads, {
       inProgressUploadsCount: this.inProgressUploads?.length,