hugoblog/static/admin/prefixed-image-widget.js

(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,
  };

  window.CMS.registerWidget(
    PrefixedImageWidget.name,
    PrefixedImageWidget.controlComponent,
    PrefixedImageWidget.previewComponent
  );
})();