misc

static/admin/prefixed-image-widget.js

@@ -0,0 +1,38 @@
+import React from "react";
+
+class PrefixedImageControl extends React.Component {
+  handleChange = async (event) => {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    // Add your prefix here
+    const prefix = "feature-";
+    const newFile = new File([file], prefix + file.name, { type: file.type });
+
+    // Use Decap's media library to persist the file
+    const { onChange, mediaPaths, field } = this.props;
+    const uploaded = await this.props.mediaLibrary.persistMedia(newFile);
+
+    // Save the public path
+    onChange(uploaded.public_path || uploaded.url);
+  };
+
+  render() {
+    const value = this.props.value || "";
+    return (
+      <div>
+        <input type="file" accept="image/*" onChange={this.handleChange} />
+        {value && <img src={value} alt="" style={{ maxWidth: "200px" }} />}
+      </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);