DEV: Use uppy in upload field (#167)

* Move from jquery uploads to uppy.js

* Apply prettier and update version

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

@@ -1,63 +1,24 @@
-import getUrl from "discourse-common/lib/get-url";
-import { getToken } from "wizard/lib/ajax";
-import WizardI18n from "../lib/wizard-i18n";
+import UppyUploadMixin from "discourse/mixins/uppy-upload";
+import Component from "@ember/component";
+import { computed } from "@ember/object";
 
-export default Ember.Component.extend({
+export default Component.extend(UppyUploadMixin, {
   classNames: ["wizard-field-upload"],
   classNameBindings: ["isImage"],
   uploading: false,
-  isImage: false,
+  type: computed(function () {
+    return `wizard_${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)
+    );
+  }),
 
-  didInsertElement() {
-    this._super();
-
-    const $upload = $(this.element);
-
-    const id = this.get("field.id");
-
-    $upload.fileupload({
-      url: getUrl("/uploads.json"),
-      formData: {
-        synchronous: true,
-        type: `wizard_${id}`,
-        authenticity_token: getToken(),
-      },
-      dataType: "json",
-      dropZone: $upload,
-    });
-
-    $upload.on("fileuploadsubmit", () => this.set("uploading", true));
-
-    $upload.on("fileuploaddone", (e, response) => {
-      this.setProperties({
-        "field.value": response.result,
-        uploading: false,
-      });
-      if (
-        Discourse.SiteSettings.wizard_recognised_image_upload_formats
-          .split("|")
-          .includes(response.result.extension)
-      ) {
-        this.setProperties({
-          isImage: true,
-        });
-      }
-    });
-
-    $upload.on("fileuploadfail", (e, response) => {
-      let message = WizardI18n("wizard.upload_error");
-      if (response.jqXHR.responseJSON && response.jqXHR.responseJSON.errors) {
-        message = response.jqXHR.responseJSON.errors.join("\n");
-      }
-
-      window.swal({
-        customClass: "wizard-warning",
-        title: "",
-        text: message,
-        type: "warning",
-        confirmButtonColor: "#6699ff",
-      });
-      this.set("uploading", false);
-    });
+  uploadDone(upload) {
+    this.set("field.value", upload);
   },
 });

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

@@ -6,7 +6,7 @@
     {{d-icon "upload"}}
   {{/if}}
 
-  <input disabled={{uploading}} type="file" accept={{field.file_types}} style="visibility: hidden; position: absolute;" >
+  <input disabled={{uploading}} class="hidden-upload-field" type="file" accept={{field.file_types}} style="visibility: hidden; position: absolute;" >
 </label>
 
 {{#if field.value}}

plugin.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 # name: discourse-custom-wizard
 # about: Create custom wizards
-# version: 1.16.0
+# version: 1.16.1
 # authors: Angus McLeod
 # url: https://github.com/paviliondev/discourse-custom-wizard
 # contact emails: angus@thepavilion.io