From 4c80beeec9d85b925f32bc78f6b594d2f0150575 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Thu, 24 Oct 2024 12:05:36 +0100
Subject: [PATCH] DEV: Update form-template-field/upload uppy usage (#29367)

---
 .../components/form-template-field/upload.gjs | 35 +++++++++++--------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/form-template-field/upload.gjs b/app/assets/javascripts/discourse/app/components/form-template-field/upload.gjs
index 140f0ae976a..a24136ef0b5 100644
--- a/app/assets/javascripts/discourse/app/components/form-template-field/upload.gjs
+++ b/app/assets/javascripts/discourse/app/components/form-template-field/upload.gjs
@@ -1,31 +1,36 @@
+import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
-import Component from "@ember/component";
-import { computed } from "@ember/object";
+import { getOwner } from "@ember/owner";
 import { dasherize } from "@ember/string";
 import { htmlSafe } from "@ember/template";
 import PickFilesButton from "discourse/components/pick-files-button";
 import { isAudio, isImage, isVideo } from "discourse/lib/uploads";
-import UppyUploadMixin from "discourse/mixins/uppy-upload";
+import UppyUpload from "discourse/lib/uppy/uppy-upload";
 import icon from "discourse-common/helpers/d-icon";
+import { bind } from "discourse-common/utils/decorators";
 
-export default class FormTemplateFieldUpload extends Component.extend(
-  UppyUploadMixin
-) {
+export default class FormTemplateFieldUpload extends Component {
   @tracked uploadValue;
   @tracked uploadedFiles = [];
-  @tracked disabled = this.uploadingOrProcessing;
-  @tracked fileUploadElementId = `${dasherize(this.id)}-uploader`;
+  @tracked fileUploadElementId = `${dasherize(this.args.id)}-uploader`;
   @tracked fileInputSelector = `#${this.fileUploadElementId}`;
 
-  type = "composer";
+  uppyUpload = new UppyUpload(getOwner(this), {
+    id: this.args.id,
+    type: "composer",
+    uploadDone: this.uploadDone,
+  });
 
-  @computed("uploadingOrProcessing")
   get uploadStatusLabel() {
-    return this.uploadingOrProcessing
+    return this.uppyUpload.uploading || this.uppyUpload.processing
       ? "form_templates.upload_field.uploading"
       : "form_templates.upload_field.upload";
   }
 
+  get disabled() {
+    return this.uppyUpload.uploading || this.uppyUpload.processing;
+  }
+
   /**
    * The validation from PickFilesButton._filesPicked, where acceptedFormatsOverride
    * is validated and displays a message, happens after the upload is complete.
@@ -37,7 +42,7 @@ export default class FormTemplateFieldUpload extends Component.extend(
    */
   isUploadedFileAllowed(file) {
     // same logic from PickFilesButton._hasAcceptedExtensionOrType
-    const fileTypes = this.attributes.file_types;
+    const fileTypes = this.args.attributes.file_types;
     const extension = file.name.split(".").pop();
 
     return (
@@ -47,9 +52,10 @@ export default class FormTemplateFieldUpload extends Component.extend(
     );
   }
 
+  @bind
   uploadDone(upload) {
     // If re-uploading, clear the existing file if multiple aren't allowed
-    if (!this.attributes.allow_multiple && this.uploadValue) {
+    if (!this.args.attributes.allow_multiple && this.uploadValue) {
       this.uploadedFiles = [];
       this.uploadValue = "";
     }
@@ -57,7 +63,7 @@ export default class FormTemplateFieldUpload extends Component.extend(
     this.uploadedFiles.pushObject(upload);
 
     const uploadMarkdown = this.buildMarkdown(upload);
-    if (this.uploadValue && this.allowMultipleFiles) {
+    if (this.uploadValue && this.uppyUpload.allowMultipleFiles) {
       // multiple file upload
       this.uploadValue = `${this.uploadValue}\n${uploadMarkdown}`;
     } else {
@@ -102,6 +108,7 @@ export default class FormTemplateFieldUpload extends Component.extend(
       <input type="hidden" name={{@id}} value={{this.uploadValue}} />
 
       <PickFilesButton
+        @registerFileInput={{this.uppyUpload.setup}}
         @fileInputClass="form-template-field__upload"
         @fileInputId={{this.fileUploadElementId}}
         @allowMultiple={{@attributes.allow_multiple}}