mirror of
https://github.com/discourse/discourse.git
synced 2024-12-14 10:40:22 +08:00
2228f75645
+ native classes + tracked properties - Ember.Object - Ember.Evented - observers - mixins - computed/discourseComputed Also removes unused wizard infrastructure for warnings. It appears that once upon on time, either the server can generate warnings, or some client code can generate them, which requires an extra confirmation from the user before they can continue to the next step. This code is not tested and appears unused and defunct. Nothing generates such warning and the server does not serialize them. Extracted from https://github.com/discourse/discourse/pull/23678
89 lines
2.5 KiB
JavaScript
89 lines
2.5 KiB
JavaScript
import Component from "@ember/component";
|
|
import { warn } from "@ember/debug";
|
|
import { inject as service } from "@ember/service";
|
|
import { dasherize } from "@ember/string";
|
|
import Uppy from "@uppy/core";
|
|
import DropTarget from "@uppy/drop-target";
|
|
import XHRUpload from "@uppy/xhr-upload";
|
|
import { getOwnerWithFallback } from "discourse-common/lib/get-owner";
|
|
import getUrl from "discourse-common/lib/get-url";
|
|
import discourseComputed from "discourse-common/utils/decorators";
|
|
import I18n from "discourse-i18n";
|
|
|
|
export default Component.extend({
|
|
classNames: ["wizard-container__image-upload"],
|
|
dialog: service(),
|
|
uploading: false,
|
|
|
|
@discourseComputed("field.id")
|
|
previewComponent(id) {
|
|
const componentName = `image-preview-${dasherize(id)}`;
|
|
const exists = getOwnerWithFallback(this).lookup(
|
|
`component:${componentName}`
|
|
);
|
|
return exists ? componentName : "wizard-image-preview";
|
|
},
|
|
|
|
didInsertElement() {
|
|
this._super(...arguments);
|
|
this.setupUploads();
|
|
},
|
|
|
|
setupUploads() {
|
|
const id = this.field.id;
|
|
this._uppyInstance = new Uppy({
|
|
id: `wizard-field-image-${id}`,
|
|
meta: { upload_type: `wizard_${id}` },
|
|
autoProceed: true,
|
|
});
|
|
|
|
this._uppyInstance.use(XHRUpload, {
|
|
endpoint: getUrl("/uploads.json"),
|
|
headers: {
|
|
"X-CSRF-Token": this.session.csrfToken,
|
|
},
|
|
});
|
|
|
|
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);
|
|
});
|
|
|
|
this._uppyInstance.on("upload-error", (file, error, response) => {
|
|
let message = I18n.t("wizard.upload_error");
|
|
if (response.body.errors) {
|
|
message = response.body.errors.join("\n");
|
|
}
|
|
|
|
this.dialog.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",
|
|
});
|
|
}
|
|
});
|
|
});
|
|
},
|
|
});
|