File Upload with JSX

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 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!
Screenshot 2022-11-03 133227

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.