Convert upload component to new type with improved uppy support

Author: angusmcleod

assets/javascripts/discourse/components/custom-wizard-field-upload.js.es6

@@ -1,27 +1,58 @@
-import UppyUploadMixin from "discourse/mixins/uppy-upload";
+import UppyUpload from "discourse/lib/uppy/uppy-upload";
 import Component from "@ember/component";
-import { computed } from "@ember/object";
+import { getOwner } from "@ember/owner";
+import { service } from "@ember/service";
+import discourseComputed from "discourse-common/utils/decorators";
+import I18n from "discourse-i18n";
+import { action } from "@ember/object";
 
-export default Component.extend(UppyUploadMixin, {
-  classNames: ["wizard-field-upload"],
-  classNameBindings: ["isImage", "fieldClass"],
-  uploading: false,
-  type: computed(function () {
-    return `wizard_${this.field.id}`;
-  }),
-  id: computed(function () {
-    return `wizard_field_upload_${this.field.id}`;
-  }),
-  isImage: computed("field.value.extension", function () {
-    return (
-      this.field.value &&
-      this.siteSettings.wizard_recognised_image_upload_formats
-        .split("|")
-        .includes(this.field.value.extension)
-    );
-  }),
+export default class CustomWizardFieldUpload extends Component {
+  @service siteSettings;
 
-  uploadDone(upload) {
-    this.set("field.value", upload);
-  },
-});
+  @action
+  setup() {
+    this.uppyUpload = new UppyUpload(getOwner(this), {
+      id: this.inputId,
+      type: `wizard_${this.field.id}`,
+      uploadDone: (upload) => {
+        this.setProperties({
+          "field.value": upload,
+          isImage: this.imageUploadFormats.includes(upload.extension),
+        });
+        this.done();
+      },
+    });
+    this.uppyUpload.setup(document.getElementById(this.inputId));
+  }
+
+  get imageUploadFormats() {
+    return this.siteSettings.wizard_recognised_image_upload_formats.split("|");
+  }
+
+  get inputId() {
+    return `wizard_field_upload_${this.field?.id}`;
+  }
+
+  get wrapperClass() {
+    let result = "wizard-field-upload";
+    if (this.isImage) {
+      result += " is-image";
+    }
+    if (this.fieldClass) {
+      result += ` ${this.fieldClass}`;
+    }
+    return result;
+  }
+
+  @discourseComputed("uppyUpload.uploading", "uppyUpload.uploadProgress")
+  uploadLabel() {
+    return this.uppyUpload?.uploading
+      ? `${I18n.t("wizard.uploading")} ${this.uppyUpload.uploadProgress}%`
+      : I18n.t("wizard.upload");
+  }
+
+  @action
+  chooseFiles() {
+    this.uppyUpload?.openPicker();
+  }
+}

assets/javascripts/discourse/templates/components/custom-wizard-field-upload.hbs

@@ -1,27 +1,26 @@
-<label
-  class="wizard-btn wizard-btn-upload-file {{if uploading 'disabled'}}"
-  tabindex={{field.tabindex}}
->
-  {{#if uploading}}
-    {{i18n "wizard.uploading"}}
-  {{else}}
-    {{i18n "wizard.upload"}}
-    {{d-icon "upload"}}
-  {{/if}}
-
+<div class={{this.wrapperClass}}>
   <input
-    disabled={{uploading}}
+    {{did-insert this.setup}}
+    disabled={{this.uppyUpload.uploading}}
+    id={{this.inputId}}
     class="hidden-upload-field"
     type="file"
-    accept={{field.file_types}}
+    accept={{this.field.file_types}}
     style="visibility: hidden; position: absolute;"
   />
-</label>
-
-{{#if field.value}}
-  {{#if isImage}}
-    <img src={{field.value.url}} class="wizard-image-preview" />
-  {{else}}
-    {{field.value.original_filename}}
+  <DButton
+    @translatedLabel={{this.uploadLabel}}
+    @translatedTitle={{this.uploadLabel}}
+    @icon="upload"
+    @disabled={{this.uppyUpload.uploading}}
+    @action={{this.chooseFiles}}
+    class="wizard-btn wizard-btn-upload-file"
+  />
+  {{#if this.field.value}}
+    {{#if this.isImage}}
+      <img src={{this.field.value.url}} class="wizard-image-preview" />
+    {{else}}
+      {{this.field.value.original_filename}}
+    {{/if}}
   {{/if}}
-{{/if}}
+</div>