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

import React from "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 (
      <div>
        <button type="button" onClick={this.openMediaLibrary}>
          {value ? "Change Image" : "Add Image"}
        </button>
        {value && <img src={value} alt="" style={{ maxWidth: "200px", display: "block", marginTop: "1em" }} />}
      </div>
    );
  }
}

const PrefixedImageWidget = {
  name: "prefixed-image",
  controlComponent: PrefixedImageControl,
  previewComponent: ({ value }) =>
    value ? <img src={value} alt="" style={{ maxWidth: "200px" }} /> : null,
};

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