DEV: Use Uppy in wizard-field-image uploads (#15269)

We cannot use any of the uppy mixins or core code, because
the code there is not shared with the wizard, and to move
it all to discourse-common would be a task almost equal
difficulty to taking the ring to Mordor.

Therefore, we can just use the uppy vendor libraries in the
wizard, and do a quick-n-dirty version of the uppy upload
code for the wizard-field-image uploader.

app/assets/javascripts/wizard/components/wizard-field-image.js

@@ -1,10 +1,14 @@
 import Component from "@ember/component";
+import { warn } from "@ember/debug";
 import I18n from "I18n";
 import { dasherize } from "@ember/string";
 import discourseComputed from "discourse-common/utils/decorators";
 import { getOwner } from "discourse-common/lib/get-owner";
 import { getToken } from "wizard/lib/ajax";
 import getUrl from "discourse-common/lib/get-url";
+import Uppy from "@uppy/core";
+import DropTarget from "@uppy/drop-target";
+import XHRUpload from "@uppy/xhr-upload";
 
 export default Component.extend({
   classNames: ["wizard-image-row"],
@@ -19,37 +23,63 @@ export default Component.extend({
 
   didInsertElement() {
     this._super(...arguments);
+    this.setupUploads();
+  },
 
-    const $upload = $(this.element);
-
+  setupUploads() {
     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,
+    this._uppyInstance = new Uppy({
+      id: `wizard-field-image-${id}`,
+      meta: { upload_type: `wizard_${id}` },
+      autoProceed: true,
     });
 
-    $upload.on("fileuploadsubmit", () => this.set("uploading", true));
+    this._uppyInstance.use(XHRUpload, {
+      endpoint: getUrl("/uploads.json"),
+      headers: {
+        "X-CSRF-Token": getToken(),
+      },
+    });
 
-    $upload.on("fileuploaddone", (e, response) => {
-      this.set("field.value", response.result.url);
+    this._uppyInstance.use(DropTarget, { target: this.element });
+
+    this._uppyInstance.on("upload", () => {
+      this.set("uploading", true);
+    });
+
+    this._uppyInstance.on("upload-success", (file, response) => {
+      this.set("field.value", response.body.url);
       this.set("uploading", false);
     });
 
-    $upload.on("fileuploadfail", (e, response) => {
+    this._uppyInstance.on("upload-error", (file, error, response) => {
       let message = I18n.t("wizard.upload_error");
-      if (response.jqXHR.responseJSON && response.jqXHR.responseJSON.errors) {
-        message = response.jqXHR.responseJSON.errors.join("\n");
+      if (response.body.errors) {
+        message = response.body.errors.join("\n");
       }
 
       window.bootbox.alert(message);
       this.set("uploading", false);
     });
+
+    this.element
+      .querySelector(".wizard-hidden-upload-field")
+      .addEventListener("change", (event) => {
+        const files = Array.from(event.target.files);
+        files.forEach((file) => {
+          try {
+            this._uppyInstance.addFile({
+              source: `${this.id} file input`,
+              name: file.name,
+              type: file.type,
+              data: file,
+            });
+          } catch (err) {
+            warn(`error adding files to uppy: ${err}`, {
+              id: "discourse.upload.uppy-add-files-error",
+            });
+          }
+        });
+      });
   },
 });