diff --git a/static/admin/prefixed-image-widget.js b/static/admin/prefixed-image-widget.js index 0f7d15b..0165be6 100644 --- a/static/admin/prefixed-image-widget.js +++ b/static/admin/prefixed-image-widget.js @@ -1,47 +1,55 @@ -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); - }); - }, - }); +(function waitForCMSAndReact() { + if (!(window.CMS && window.React)) { + setTimeout(waitForCMSAndReact, 50); + return; + } + const React = window.React; + + 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, }; - 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 -); \ No newline at end of file + window.CMS.registerWidget( + PrefixedImageWidget.name, + PrefixedImageWidget.controlComponent, + PrefixedImageWidget.previewComponent + ); +})(); \ No newline at end of file