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:
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 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, {
|
export default class CustomWizardFieldUpload extends Component {
|
||||||
classNames: ["wizard-field-upload"],
|
@service siteSettings;
|
||||||
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)
|
|
||||||
);
|
|
||||||
}),
|
|
||||||
|
|
||||||
uploadDone(upload) {
|
@action
|
||||||
this.set("field.value", upload);
|
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
|
<div class={{this.wrapperClass}}>
|
||||||
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}}
|
|
||||||
|
|
||||||
<input
|
<input
|
||||||
disabled={{uploading}}
|
{{did-insert this.setup}}
|
||||||
|
disabled={{this.uppyUpload.uploading}}
|
||||||
|
id={{this.inputId}}
|
||||||
class="hidden-upload-field"
|
class="hidden-upload-field"
|
||||||
type="file"
|
type="file"
|
||||||
accept={{field.file_types}}
|
accept={{this.field.file_types}}
|
||||||
style="visibility: hidden; position: absolute;"
|
style="visibility: hidden; position: absolute;"
|
||||||
/>
|
/>
|
||||||
</label>
|
<DButton
|
||||||
|
@translatedLabel={{this.uploadLabel}}
|
||||||
{{#if field.value}}
|
@translatedTitle={{this.uploadLabel}}
|
||||||
{{#if isImage}}
|
@icon="upload"
|
||||||
<img src={{field.value.url}} class="wizard-image-preview" />
|
@disabled={{this.uppyUpload.uploading}}
|
||||||
{{else}}
|
@action={{this.chooseFiles}}
|
||||||
{{field.value.original_filename}}
|
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}}
|
||||||
{{/if}}
|
</div>
|
Laden …
In neuem Issue referenzieren