Spiegel von
https://github.com/paviliondev/discourse-custom-wizard.git
synchronisiert 2024-11-25 10:40:28 +01:00
DEV: Use uppy in upload field (#167)
* Move from jquery uploads to uppy.js * Apply prettier and update version
Dieser Commit ist enthalten in:
Ursprung
b37f7dbdd5
Commit
517da30a4c
3 geänderte Dateien mit 19 neuen und 58 gelöschten Zeilen
|
@ -1,63 +1,24 @@
|
||||||
import getUrl from "discourse-common/lib/get-url";
|
import UppyUploadMixin from "discourse/mixins/uppy-upload";
|
||||||
import { getToken } from "wizard/lib/ajax";
|
import Component from "@ember/component";
|
||||||
import WizardI18n from "../lib/wizard-i18n";
|
import { computed } from "@ember/object";
|
||||||
|
|
||||||
export default Ember.Component.extend({
|
export default Component.extend(UppyUploadMixin, {
|
||||||
classNames: ["wizard-field-upload"],
|
classNames: ["wizard-field-upload"],
|
||||||
classNameBindings: ["isImage"],
|
classNameBindings: ["isImage"],
|
||||||
uploading: false,
|
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() {
|
uploadDone(upload) {
|
||||||
this._super();
|
this.set("field.value", upload);
|
||||||
|
|
||||||
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);
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
{{d-icon "upload"}}
|
{{d-icon "upload"}}
|
||||||
{{/if}}
|
{{/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>
|
</label>
|
||||||
|
|
||||||
{{#if field.value}}
|
{{#if field.value}}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
# frozen_string_literal: true
|
# frozen_string_literal: true
|
||||||
# name: discourse-custom-wizard
|
# name: discourse-custom-wizard
|
||||||
# about: Create custom wizards
|
# about: Create custom wizards
|
||||||
# version: 1.16.0
|
# version: 1.16.1
|
||||||
# authors: Angus McLeod
|
# authors: Angus McLeod
|
||||||
# url: https://github.com/paviliondev/discourse-custom-wizard
|
# url: https://github.com/paviliondev/discourse-custom-wizard
|
||||||
# contact emails: angus@thepavilion.io
|
# contact emails: angus@thepavilion.io
|
||||||
|
|
Laden …
In neuem Issue referenzieren