reworked custom widget

static/admin/prefixed-image-widget.js

@@ -1,28 +1,35 @@
 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);
+  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>
-        <input type="file" accept="image/*" onChange={this.handleChange} />
-        {value && <img src={value} alt="" style={{ maxWidth: "200px" }} />}
+        <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>
     );
   }
@@ -35,4 +42,8 @@ const PrefixedImageWidget = {
     value ? <img src={value} alt="" style={{ maxWidth: "200px" }} /> : null,
 };
 
-window.CMS.registerWidget(PrefixedImageWidget.name, PrefixedImageWidget.controlComponent, PrefixedImageWidget.previewComponent);
+window.CMS.registerWidget(
+  PrefixedImageWidget.name,
+  PrefixedImageWidget.controlComponent,
+  PrefixedImageWidget.previewComponent
+);