DEV: UppyUpload improvements (#29279)

These tweaks will help adoption of the non-mixin-based uppy patterns.

- Add `type:`  to default arguments list
- Update pick-files-button to support explicit element registration
- Make `cancelSingleUpload` a public API, and add `cancelAllUploads`
- Remove `isDestroyed` logic - it doesn't do anything outside a component
- Add `@bind` to `setup()`
- Allow `additionalParams` to be a function
- Fix `autoStart` mixin shim

app/assets/javascripts/discourse/app/components/pick-files-button.hbs

@@ -7,6 +7,7 @@
 {{/if}}
 {{#if this.acceptsAllFormats}}
   <input
+    {{did-insert (or @registerFileInput (noop))}}
     type="file"
     id={{this.fileInputId}}
     class={{this.fileInputClass}}
@@ -15,6 +16,7 @@
   />
 {{else}}
   <input
+    {{did-insert (or @registerFileInput (noop))}}
     type="file"
     id={{this.fileInputId}}
     class={{this.fileInputClass}}

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

@@ -54,6 +54,7 @@ const DEFAULT_CONFIG = {
   useMultipartUploadsIfAvailable: false,
   uppyReady: null,
   onProgressUploadsChanged: null,
+  type: null,
 };
 
 // Merges incoming config with defaults, without actually evaluating
@@ -125,11 +126,12 @@ export default class UppyUpload {
     );
     this.appEvents.off(
       `upload-mixin:${this.config.id}:cancel-upload`,
-      this._cancelSingleUpload
+      this.cancelSingleUpload
     );
     this.uppyWrapper.uppyInstance?.close();
   }
 
+  @bind
   setup(fileInputEl) {
     this._fileInputEl = fileInputEl;
 
@@ -145,7 +147,7 @@ export default class UppyUpload {
       // actual file type
       meta: deepMerge(
         { upload_type: this.config.type },
-        this.config.additionalParams
+        this.#resolvedAdditionalParams
       ),
 
       onBeforeFileAdded: (currentFile) => {
@@ -359,7 +361,7 @@ export default class UppyUpload {
     );
     this.appEvents.on(
       `upload-mixin:${this.config.id}:cancel-upload`,
-      this._cancelSingleUpload
+      this.cancelSingleUpload
     );
     this.config.uppyReady?.();
 
@@ -372,6 +374,11 @@ export default class UppyUpload {
     });
   }
 
+  @bind
+  openPicker() {
+    this._fileInputEl.click();
+  }
+
   #triggerInProgressUploadsEvent() {
     this.config.onProgressUploadsChanged?.(this.inProgressUploads);
     this.appEvents.trigger(
@@ -469,11 +476,18 @@ export default class UppyUpload {
   }
 
   @bind
-  _cancelSingleUpload(data) {
+  cancelSingleUpload(data) {
     this.uppyWrapper.uppyInstance.removeFile(data.fileId);
     this.#removeInProgressUpload(data.fileId);
   }
 
+  @bind
+  cancelAllUploads() {
+    this.uppyWrapper.uppyInstance?.cancelAll();
+    this.inProgressUploads.length = 0;
+    this.#triggerInProgressUploadsEvent();
+  }
+
   @bind
   async addFiles(files, opts = {}) {
     if (!this.session.csrfToken) {
@@ -506,11 +520,19 @@ export default class UppyUpload {
       type: "POST",
       data: deepMerge(
         { unique_identifier: file.meta.uniqueUploadIdentifier },
-        this.config.additionalParams
+        this.#resolvedAdditionalParams
       ),
     });
   }
 
+  get #resolvedAdditionalParams() {
+    if (typeof this.config.additionalParams === "function") {
+      return this.config.additionalParams();
+    } else {
+      return this.config.additionalParams;
+    }
+  }
+
   #reset() {
     this.uppyWrapper.uppyInstance?.cancelAll();
     Object.assign(this, {
@@ -524,10 +546,6 @@ export default class UppyUpload {
   }
 
   #removeInProgressUpload(fileId) {
-    if (this.isDestroyed || this.isDestroying) {
-      return;
-    }
-
     const index = this.inProgressUploads.findIndex((upl) => upl.id === fileId);
     if (index === -1) {
       return;

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

@@ -74,7 +74,7 @@ export default Mixin.create({
 function configShim(component) {
   return {
     get autoStartUploads() {
-      return component.autoStartUploads || true;
+      return component.autoStartUploads ?? true;
     },
     get id() {
       return component.id;