Hello. I am currently working on implementing a file upload field with a custom renderer. I am unsure how to implement some of the code from the JSONForms.io site, as it’s all TSX. This is what I have so far, and it will show up correctly and allow me to upload a file, however, I get no value from it. The form leaves it blank even though a file is uploaded. I know I’m missing stuff in the custom renderer. Just need help with TSX to JSX. Any help is appreciated!
Hi @ashton,
TSX is really the same as JSX just with some types thrown in. So all you need to do is to remove the types and you have valid JSX.
However the listed code has some other problems:
You are rendering a FileInputField but for some reason the MaterialLayoutRenderer is invoked within it. This looks unexpected. Instead I would expect something like this: <MaterialInputControl {...props} input={MuiInputNumber} />. So reusing the MaterialInputControl from JSON Forms and just passing in your own File Upload Control instead of MuiInputNumber as in the linked renderer.
Another reason that this is a mismatch is that your’e using withJsonFormsControlProps but then build up the props for the MaterialLayoutRenderer manually which seems weird. Usually you would use a layout binding instead.
So I would say try to get rid of the layout rendering here and replicate the MaterialNumberControl I linked above, just adapted to your file upload use case.
Hello @sdirix,
I am picking up where @ashton left off and he made some progress replicating the MaterialInputControl. We are stuck with “No applicable renderer found.” showing on our site. I am pretty new to jsonforms and am wondering if it’s an issue with how the schema is set up or our own FileInputField renderer.
Thanks,
-Alex
Hi @alextsch12,
Sadly I don’t have sufficient information to help you. Can you post how JsonForms is invoked and which schema and uischema are used?
1 Like
Schema:
Hi @alextsch12,
In your UI Schema you have at the top level an UI Schema element of type “Accord”. There is no off-the-shelf renderer which is able to render “Accord”. If you didn’t add a custom renderer which is handling this element, JSON Forms will complain that no applicable renderer was found.
Some other notes:
- “Additional Documentation Attachment” is modeled as an
arraywithout specifying at all how the content looks like. - The UI Schema contains a “VerticalLayout” which renders two “HorizontalLayout”, each with only one child. In this case the “HorizontalLayout” elements are redundant and have no visual effect.