Save the data of custom field plugin

System Information
  • Strapi Version: 3.5.4
  • Operating System: ubuntu
  • Database: postgresql
  • Node Version: 10.19.0
  • NPM Version:
  • Yarn Version: 1.22.4

hello
i created a custom field plugin and registered the field and i added it to a component type with some other fields when i try to add data from the content builder it saves successfully but when i call the API the custom field data is not there (the entry itself doesn’t exist) and when i log the value passed to the field it’s null

here is the field code:
import React, { useEffect, useState } from “react”;
import axios from “axios”;
import TextField from “@material-ui/core/TextField”;
import MenuItem from “@material-ui/core/MenuItem”;

    const style = {
      width: "23%",
      margin: "1%",
      height: "250px",
    };

const select = {
  width: "23%",
  margin: "1%",
  height: "250px",
  border: "3px solid blue",
  cursor: "pointer",
};

const Gallery = ({ label, name, onChange, value }) => {
  const [data, setData] = useState([]);
  const [selectedGallery, setSelectedGallery] = useState();
  const [hover, setHover] = useState("");
  const [selectedImages, setSelectedImages] = useState([]);

  console.log("value", value);
  console.log("name", name);

  useEffect(() => {
    axios
      .get("http://localhost:1337/galeries")
      .then((res) => {
        setData(res.data);
      })
      .catch((e) => {
        setLoading(Failuer);
      });
  }, []);

  const handleChange = (val) => {
    const index = data.findIndex((ele) => ele.id === val);
    setSelectedGallery(data[index]);
    const URLs = selectedImages.map((ele) => ele.url);
    const allVals = { name: data[index].Title, URLs };
    onChange({ target: { name, value: allVals, type: "paragraph" } });
  };

  const handleSelectImages = (id) => {
    setSelectedImages((prevstate) => {
      const i = prevstate.findIndex((ele) => ele.id === id);
      const index = selectedGallery.mediumVignette.findIndex(
        (ele) => ele.id === id
      );
      if (i === -1) {
        prevstate.push(selectedGallery.mediumVignette[index]);
        return prevstate;
      } else {
        const filtered = prevstate.filter((ele, ind) => ind !== i);
        return filtered;
      }
    });
  };

  return (
    <div style={{ width: "200%" }}>
      <label
        style={{
          display: "block",
          marginBottom: "1rem",
          width: "100%",
          fontWeight: "500",
          fontSize: "1.3rem",
          color: "rgb(51, 55, 64)",
        }}
      >
        {label}
      </label>
      <TextField
        select
        style={{ width: "50%", margin: "5px 0px 5px 10px" }}
        label="Marque"
        variant="outlined"
        value={selectedGallery?.id}
        onChange={(e) => handleChange(e.target.value)}
      >
        {data?.map((option) => (
          <MenuItem key={option.id} value={option.id}>
            {option.Title}
          </MenuItem>
        ))}
      </TextField>
      <div style={{ display: "flex", flexWrap: "wrap" }}>
        {selectedGallery &&
          selectedGallery.mediumVignette.map((item, index) => {
            const selected = selectedImages.filter((ele) => ele.id === item.id);
            return (
              <img
                src={`http://localhost:1337${item.url}`}
                alt={selectedGallery.Title}
                style={
                  hover === index || selected.length !== 0 ? select : style
                }
                onMouseEnter={() => setHover(index)}
                onMouseLeave={() => setHover("")}
                onClick={() => handleSelectImages(item.id)}
              />
            );
          })}
      </div>
    </div>
  );
};

export default Gallery;

and here the registration code:
import pluginPkg from “…/…/package.json”;
import InputMedia from “./components/paragraph”;
import pluginId from “./pluginId”;

export default (strapi) => {
  const pluginDescription =
    pluginPkg.strapi.description || pluginPkg.description;

  const plugin = {
    blockerComponent: null,
    blockerComponentProps: {},
    description: pluginDescription,
    icon: pluginPkg.strapi.icon,
    id: pluginId,
    initializer: () => null,
    injectedComponents: [],
    isReady: true,
    isRequired: pluginPkg.strapi.required || false,
    mainComponent: null,
    name: pluginPkg.strapi.name,
    preventComponentRendering: false,
    settings: null,
    trads: {},
  };

  strapi.registerField({ type: "paragraph", Component: InputMedia });

  return strapi.registerPlugin(plugin);
};

i added the field to a component model
{
“collectionName”: “components_text_texts”,
“info”: {
“name”: “text”,
“icon”: “ad”,
“description”: “”
},
“options”: {},
“attributes”: {
“alligment”: {
“type”: “enumeration”,
“enum”: [
“left”,
“right”
]
},
“paragraph”: {
“type”: “richtext”
},
“gallery”: {
“type”: “paragraph”
}
}
}
and added the component in content-type dynamicZone:
{
“kind”: “collectionType”,
“collectionName”: “articles”,
“info”: {
“name”: “Actualités”,
“description”: “”
},
“options”: {
“increments”: true,
“timestamps”: true,
“draftAndPublish”: true
},
“attributes”: {
“Title”: {
“type”: “string”,
“required”: true
},
“Body”: {
“type”: “richtext”
},
“smallVignette”: {
“collection”: “file”,
“via”: “related”,
“allowedTypes”: [
“images”
],
“plugin”: “upload”,
“required”: false
},
“mediumVignette”: {
“collection”: “file”,
“via”: “related”,
“allowedTypes”: [
“images”
],
“plugin”: “upload”,
“required”: false
},
“Vehicle”: {
“type”: “json”
},
“Surtitre”: {
“type”: “string”
},
“statut”: {
“type”: “enumeration”,
“enum”: [
“superstar”,
“star”,
“normal”
]
},
“publication”: {
“type”: “datetime”
},
“author”: {
“type”: “string”
},
“posttags”: {
“type”: “enumeration”,
“enum”: [
“scoops”,
“economie”,
“politique”,
“sports”
]
},
“multiText”: {
“type”: “dynamiczone”,
“components”: [
“text.text”
]
},
“chapo”: {
“type”: “richtext”
},
“largeVignette”: {
“collection”: “file”,
“via”: “related”,
“allowedTypes”: [
“images”,
“files”,
“videos”
],
“plugin”: “upload”,
“required”: false
}
}
}
when i add data to that type it save successfully but when i call the GET API this is the response:
[{"id":8,"Title":"xasscasc","Body":null,"Tags":null,"Vehicle":null,"published_at":"2021-05-20T17:29:30.016Z","created_at":"2021-05-20T17:17:07.483Z","updated_at":"2021-05-20T17:29:30.630Z","Surtitre":"some subtitle","Chapo":null,"statut":null,"publication":null,"author":null,"posttags":null,"chapo":"chapo","galerie":null,"pass":null,"para":null,"multiText":[{"__component":"text.text","id":6,"text":null,"dossier":null,"alligment":"left","paragraph":"p1"}],"smallVignette":[],"mediumVignette":[],"largeVignette":[]}]

can anyone help me with that. i need to be able to get the data of the custom field it should be an object with a field “name” and an array called URLs

Same here. It seems strapi didn’t save the custom field.

I send the request payload and get 200 response with null in that field.

There is an issue #7593 on github.