0
0
Fork 1
Spiegel von https://github.com/paviliondev/discourse-custom-wizard.git synchronisiert 2024-11-08 19:38:00 +01:00

Convert upload component to new type with improved uppy support

Dieser Commit ist enthalten in:
Angus McLeod 2024-11-06 10:06:09 +01:00
Ursprung 8751dc297a
Commit 691a8e3e78
2 geänderte Dateien mit 75 neuen und 45 gelöschten Zeilen

Datei anzeigen

@ -1,27 +1,58 @@
import UppyUploadMixin from "discourse/mixins/uppy-upload";
import UppyUpload from "discourse/lib/uppy/uppy-upload";
import Component from "@ember/component";
import { computed } from "@ember/object";
import { getOwner } from "@ember/owner";
import { service } from "@ember/service";
import discourseComputed from "discourse-common/utils/decorators";
import I18n from "discourse-i18n";
import { action } from "@ember/object";
export default Component.extend(UppyUploadMixin, {
classNames: ["wizard-field-upload"],
classNameBindings: ["isImage", "fieldClass"],
uploading: false,
type: computed(function () {
return `wizard_${this.field.id}`;
}),
id: computed(function () {
return `wizard_field_upload_${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)
);
}),
export default class CustomWizardFieldUpload extends Component {
@service siteSettings;
uploadDone(upload) {
this.set("field.value", upload);
},
});
@action
setup() {
this.uppyUpload = new UppyUpload(getOwner(this), {
id: this.inputId,
type: `wizard_${this.field.id}`,
uploadDone: (upload) => {
this.setProperties({
"field.value": upload,
isImage: this.imageUploadFormats.includes(upload.extension),
});
this.done();
},
});
this.uppyUpload.setup(document.getElementById(this.inputId));
}
get imageUploadFormats() {
return this.siteSettings.wizard_recognised_image_upload_formats.split("|");
}
get inputId() {
return `wizard_field_upload_${this.field?.id}`;
}
get wrapperClass() {
let result = "wizard-field-upload";
if (this.isImage) {
result += " is-image";
}
if (this.fieldClass) {
result += ` ${this.fieldClass}`;
}
return result;
}
@discourseComputed("uppyUpload.uploading", "uppyUpload.uploadProgress")
uploadLabel() {
return this.uppyUpload?.uploading
? `${I18n.t("wizard.uploading")} ${this.uppyUpload.uploadProgress}%`
: I18n.t("wizard.upload");
}
@action
chooseFiles() {
this.uppyUpload?.openPicker();
}
}

Datei anzeigen

@ -1,27 +1,26 @@
<label
class="wizard-btn wizard-btn-upload-file {{if uploading 'disabled'}}"
tabindex={{field.tabindex}}
>
{{#if uploading}}
{{i18n "wizard.uploading"}}
{{else}}
{{i18n "wizard.upload"}}
{{d-icon "upload"}}
{{/if}}
<div class={{this.wrapperClass}}>
<input
disabled={{uploading}}
{{did-insert this.setup}}
disabled={{this.uppyUpload.uploading}}
id={{this.inputId}}
class="hidden-upload-field"
type="file"
accept={{field.file_types}}
accept={{this.field.file_types}}
style="visibility: hidden; position: absolute;"
/>
</label>
{{#if field.value}}
{{#if isImage}}
<img src={{field.value.url}} class="wizard-image-preview" />
{{else}}
{{field.value.original_filename}}
<DButton
@translatedLabel={{this.uploadLabel}}
@translatedTitle={{this.uploadLabel}}
@icon="upload"
@disabled={{this.uppyUpload.uploading}}
@action={{this.chooseFiles}}
class="wizard-btn wizard-btn-upload-file"
/>
{{#if this.field.value}}
{{#if this.isImage}}
<img src={{this.field.value.url}} class="wizard-image-preview" />
{{else}}
{{this.field.value.original_filename}}
{{/if}}
{{/if}}
{{/if}}
</div>