Spiegel von
https://github.com/paviliondev/discourse-custom-wizard.git
synchronisiert 2024-11-21 08:50:29 +01:00
Convert upload component to new type with improved uppy support
Dieser Commit ist enthalten in:
Ursprung
8751dc297a
Commit
691a8e3e78
2 geänderte Dateien mit 75 neuen und 45 gelöschten Zeilen
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
Laden …
In neuem Issue referenzieren