Add a new widget to store arbitrary files as base64 using a file input

[leplatrem]

This would allow users to store relatively small files as attributes on records instead of using attachments.

Typical use-case is to store the thumbnail of the file that is attached on the record.

In order to do this, we will need:

• a new widget that turns the file picked in the <input type="file"> into base64
• to leverage this widget in our Records form

The record schema would be:

properties:
  thumbnail:
    type: string

And the collection UI schema:

uiSchema:
  thumbnail:
    ui:widget: base64input

Then instead of contributing a new widget in the rjsf upstream project, we can follow the pattern that we currently have for our local JSON editor, and inject it ourselves during form instantiation:

kinto-admin/src/components/JSONEditor.tsx

Lines 12 to 33 in 349a374

	export default function JSONEditor({
	readonly,
	disabled,
	value,
	onChange,
	}: Props) {
	const onCodeChange = (code: string, viewUpdate: ViewUpdate) => {
	onChange(code);
	};
	return readonly || disabled ? (
	<pre>{value}</pre>
	) : (
	<CodeMirror
	value={value}
	onChange={onCodeChange}
	height="auto"
	extensions={[langs.json()]}
	indentWithTab={false}
	/>
	);
	}

kinto-admin/src/components/group/GroupForm.tsx

Lines 44 to 48 in 349a374

	const uiSchema: UiSchema = {
	data: {
	"ui:widget": JSONEditor,
	},
	};

In this case we would replace occurrences of base64input by instances of our base64 widget.

See also:

• https://rjsf-team.github.io/react-jsonschema-form/docs/advanced-customization/custom-widgets-fields/

[nathan-barrett]

Thanks @leplatrem - feel free to assign me and I'll take a stab at it