Benno Lorenz
f38f6ce270
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 39s
47 lines
1.6 KiB
JavaScript
47 lines
1.6 KiB
JavaScript
class PrefixedImageControl extends React.Component {
|
|
openMediaLibrary = () => {
|
|
this.props.mediaLibrary.open({
|
|
allowMultiple: false,
|
|
config: { allowMultiple: false },
|
|
controlID: this.props.forID,
|
|
value: this.props.value,
|
|
field: this.props.field,
|
|
onInsert: (files) => {
|
|
if (!files || files.length === 0) return;
|
|
const file = files[0];
|
|
const prefix = "feature-";
|
|
// If already prefixed, don't double-prefix
|
|
const fileName = file.name.startsWith(prefix) ? file.name : prefix + file.name;
|
|
const newFile = new File([file], fileName, { type: file.type });
|
|
this.props.mediaLibrary.persistMedia(newFile).then((uploaded) => {
|
|
this.props.onChange(uploaded.public_path || uploaded.url);
|
|
});
|
|
},
|
|
});
|
|
};
|
|
|
|
render() {
|
|
const value = this.props.value || "";
|
|
return (
|
|
React.createElement("div", null,
|
|
React.createElement("button", { type: "button", onClick: this.openMediaLibrary },
|
|
value ? "Change Image" : "Add Image"
|
|
),
|
|
value && React.createElement("img", { src: value, alt: "", style: { maxWidth: "200px", display: "block", marginTop: "1em" } })
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
const PrefixedImageWidget = {
|
|
name: "prefixed-image",
|
|
controlComponent: PrefixedImageControl,
|
|
previewComponent: ({ value }) =>
|
|
value ? React.createElement("img", { src: value, alt: "", style: { maxWidth: "200px" } }) : null,
|
|
};
|
|
|
|
window.CMS.registerWidget(
|
|
PrefixedImageWidget.name,
|
|
PrefixedImageWidget.controlComponent,
|
|
PrefixedImageWidget.previewComponent
|
|
); |