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