How to upload multiple images using JSON Forms. I create a custom component for upload image and embed into schema and uischema. Any e.g to upload images in Reactjs

1

import Dropzone from ‘react-dropzone-uploader’;

// Custom renderer for the image-uploader format

interface IProps {
data: any;
handleChange: (text: any) => void;
}
const ImageUploaderControl = ({ data, handleChange }: IProps) => {
const getUploadParams = (file: any) => ({ url: ‘/upload-endpoint’ }); // Replace with your upload endpoint

const handleChangeStatus = ({ meta, file, xhr }: any, status: any) => {
if (status === ‘done’) {
const uploadedImageUrl = JSON.parse(xhr?.response).url; // Get the URL from your server response
const updatedData = […data, uploadedImageUrl];
handleChange(updatedData);
}
};
return (
<Dropzone
getUploadParams={getUploadParams}
onChangeStatus={handleChangeStatus}
accept=‘image/*’ // Accept only image files
inputContent=‘Drop or click to upload images’
/>
);
};

export default ImageUploaderControl;

2

Hi @iashupal,

What exactly is the problem you are facing? Did you look at our custom renderers tutorial?

3

Hi @sdirix I try to upload images as custom component but when we pass root name of the schema.json in the customImageTester.ts image upload working file but when we use the actual component name in the customImageTester.ts. So, it will work as a array of strings.

work as array of strings
Code: import { rankWith, scopeEndsWith } from ‘@jsonforms/core’;

export default rankWith(
3, //increase rank as needed
scopeEndsWith(‘images’)
);

Work fine
code: import { rankWith, scopeEndsWith } from ‘@jsonforms/core’;

export default rankWith(
3, //increase rank as needed
scopeEndsWith(‘InspectionData’)
);

schema.json

{
“definitions”: {
“InspectionData”: {
“properties”: {
“images”: {
“type”: “array”,
“items”: {
“type”: “string”,
“format”: “binary”
},
“maxItems”: 6,
“minItems”: 1
},
“occupied”: {
“type”: “boolean”,
“description”: “Is the property occupied”
},
“sample_enum_oneof”: {
“enum”: [
“SOMETHING_TYPE_SINGLE_SELECT_UNSPECIFIED”,
“SOMETHING_TYPE_SINGLE_SELECT_GOOD”,
“SOMETHING_TYPE_SINGLE_SELECT_BAD”,
“SOMETHING_TYPE_SINGLE_SELECT_INDIFFERENT”
],
“oneOf”: [
{
“title”: “Unspecified”,
“description”: “No selection has been made”,
“const”: “SOMETHING_TYPE_SINGLE_SELECT_UNSPECIFIED”
},
{
“title”: “Good”,
“description”: “Mary Had A Little Lamb”,
“const”: “SOMETHING_TYPE_SINGLE_SELECT_GOOD”
},
{
“title”: “Bad”,
“description”: “Something wicked this way comes”,
“const”: “SOMETHING_TYPE_SINGLE_SELECT_BAD”
},
{
“title”: “Indifferent”,
“description”: “Meh, whatever”,
“const”: “SOMETHING_TYPE_SINGLE_SELECT_INDIFFERENT”
}
],
“title”: “Something Type Single Select”,
“description”: “Foo”
},
“sample_enum_multiselect”: {
“items”: {
“enum”: [
“SOMETHING_TYPE_MULTI_SELECT_UNSPECIFIED”,
“SOMETHING_TYPE_MULTI_SELECT_GOOD”,
“SOMETHING_TYPE_MULTI_SELECT_BAD”,
“SOMETHING_TYPE_MULTI_SELECT_INDIFFERENT”
],
“oneOf”: [
{
“title”: “Unspecified”,
“description”: “No selection has been made”,
“const”: “SOMETHING_TYPE_MULTI_SELECT_UNSPECIFIED”
},
{
“title”: “Good”,
“description”: “Mary Had A Little Lamb”,
“const”: “SOMETHING_TYPE_MULTI_SELECT_GOOD”
},
{
“title”: “Bad”,
“description”: “Something wicked this way comes”,
“const”: “SOMETHING_TYPE_MULTI_SELECT_BAD”
},
{
“title”: “Indifferent”,
“description”: “Meh, whatever”,
“const”: “SOMETHING_TYPE_MULTI_SELECT_INDIFFERENT”
}
]
},
“uniqueItems”: true,
“type”: “array”,
“title”: “Something Type Multi Select”
},
“living_room”: {
“$ref”: “#/definitions/sgt.integration.propertydata.v2.LivingRoom”,
“additionalProperties”: true
},
“grass_cut”: {
“$ref”: “#/definitions/sgt.integration.propertydata.v2.GrassCut”,
“additionalProperties”: true
}
},
“additionalProperties”: true,
“type”: “object”,
“title”: “Inspection Data”
}}

Any suggestion or modification in the code?

4

Hi @iashupal,

Sadly I don’t understand the error you are facing. What exactly is working and what is not working? Can you post code and screenshots to illustrate what the issue is?