2019-10-24 00:30:52 +08:00
|
|
|
import Component from "@ember/component";
|
2021-12-13 13:23:44 +08:00
|
|
|
import { warn } from "@ember/debug";
|
2016-09-23 02:39:36 +08:00
|
|
|
import I18n from "I18n";
|
|
|
|
import { dasherize } from "@ember/string";
|
2019-11-08 05:38:28 +08:00
|
|
|
import discourseComputed from "discourse-common/utils/decorators";
|
2016-11-04 23:32:12 +08:00
|
|
|
import { getOwner } from "discourse-common/lib/get-owner";
|
|
|
|
import getUrl from "discourse-common/lib/get-url";
|
2021-12-13 13:23:44 +08:00
|
|
|
import Uppy from "@uppy/core";
|
|
|
|
import DropTarget from "@uppy/drop-target";
|
|
|
|
import XHRUpload from "@uppy/xhr-upload";
|
2016-09-09 04:58:07 +08:00
|
|
|
|
2019-10-24 00:30:52 +08:00
|
|
|
export default Component.extend({
|
2016-09-09 04:58:07 +08:00
|
|
|
classNames: ["wizard-image-row"],
|
|
|
|
uploading: false,
|
|
|
|
|
2019-11-08 05:38:28 +08:00
|
|
|
@discourseComputed("field.id")
|
2016-09-17 01:10:12 +08:00
|
|
|
previewComponent(id) {
|
2019-11-06 02:43:49 +08:00
|
|
|
const componentName = `image-preview-${dasherize(id)}`;
|
2016-11-04 23:32:12 +08:00
|
|
|
const exists = getOwner(this).lookup(`component:${componentName}`);
|
2016-09-17 01:10:12 +08:00
|
|
|
return exists ? componentName : "wizard-image-preview";
|
|
|
|
},
|
|
|
|
|
2016-09-09 04:58:07 +08:00
|
|
|
didInsertElement() {
|
2019-01-19 17:05:51 +08:00
|
|
|
this._super(...arguments);
|
2021-12-13 13:23:44 +08:00
|
|
|
this.setupUploads();
|
|
|
|
},
|
2016-09-09 04:58:07 +08:00
|
|
|
|
2021-12-13 13:23:44 +08:00
|
|
|
setupUploads() {
|
2016-09-09 04:58:07 +08:00
|
|
|
const id = this.get("field.id");
|
2021-12-13 13:23:44 +08:00
|
|
|
this._uppyInstance = new Uppy({
|
|
|
|
id: `wizard-field-image-${id}`,
|
|
|
|
meta: { upload_type: `wizard_${id}` },
|
|
|
|
autoProceed: true,
|
|
|
|
});
|
2016-09-09 04:58:07 +08:00
|
|
|
|
2021-12-13 13:23:44 +08:00
|
|
|
this._uppyInstance.use(XHRUpload, {
|
|
|
|
endpoint: getUrl("/uploads.json"),
|
|
|
|
headers: {
|
2022-06-17 20:50:21 +08:00
|
|
|
"X-CSRF-Token": this.session.csrfToken,
|
2016-09-09 04:58:07 +08:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2021-12-13 13:23:44 +08:00
|
|
|
this._uppyInstance.use(DropTarget, { target: this.element });
|
2016-09-09 04:58:07 +08:00
|
|
|
|
2021-12-13 13:23:44 +08:00
|
|
|
this._uppyInstance.on("upload", () => {
|
|
|
|
this.set("uploading", true);
|
|
|
|
});
|
|
|
|
|
|
|
|
this._uppyInstance.on("upload-success", (file, response) => {
|
|
|
|
this.set("field.value", response.body.url);
|
2016-09-09 04:58:07 +08:00
|
|
|
this.set("uploading", false);
|
|
|
|
});
|
2018-07-12 14:36:48 +08:00
|
|
|
|
2021-12-13 13:23:44 +08:00
|
|
|
this._uppyInstance.on("upload-error", (file, error, response) => {
|
2018-07-12 15:12:11 +08:00
|
|
|
let message = I18n.t("wizard.upload_error");
|
2021-12-13 13:23:44 +08:00
|
|
|
if (response.body.errors) {
|
|
|
|
message = response.body.errors.join("\n");
|
2018-07-12 14:36:48 +08:00
|
|
|
}
|
|
|
|
|
2020-11-11 00:31:54 +08:00
|
|
|
window.bootbox.alert(message);
|
2018-07-12 14:36:48 +08:00
|
|
|
this.set("uploading", false);
|
|
|
|
});
|
2021-12-13 13:23:44 +08:00
|
|
|
|
|
|
|
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",
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
2016-09-09 04:58:07 +08:00
|
|
|
},
|
|
|
|
});
|