FileWidget

import { FileWidget } from "@prestojs/ui-antd";

FileWidget(props)

File upload widget that wraps the antd Upload component. Unlike that component this one never uploads immediately - the raw File object will be passed to onChange and it's expected the upload will happen externally (eg. on a form submit).

If multiple is true then the value passed to onChange will be an array of File objects or an empty array when clearing the value.

If multiple is false then the value passed to onChange will be a File object or null when clearing the value.

For very custom requirements consider using the useFileList in a custom component.

// TODO: Example: limit // TODO: Example: multiple // TODO: Example: custom children // TODO: Example: drag and drop // TODO: beforeUpload

Component Props:

	Prop	Type	Description
*	props An object with the properties below
	props.asyncChoices	AsyncChoicesInterface	Any AsyncChoices, if applicable. This typically comes from Field.asyncChoices.
*	props.children	React.ReactNode	Contents to render (eg. upload button etc). If not provided renders default Icon or Button depending on `listType`
	props.choices	\|[SingleValue, string][]	Any choices, if applicable. This typically comes from Field.choices. This can be a `Map` of value to label or an array of 2-element arrays `[value, label]`.
*	props.input	UploadWidgetInputType
*	props.limit	number\|null	Number of files to allow. `null` means unlimited. If `limit` is `1` then after uploading a file the UI will change from an Add icon to an Edit icon and uploading a new file will replace the original. If `limit` is > `1` then once the limit has been reached the UI will disallow adding new files. To add a new file an existing one must be removed. If `multiple` is `true` then the value passed to `onChange` will be an array, otherwise it will be a `File` object or null. It is valid to set `limit` to `1` and `multiple` to `true`. Defaults to `1`.
	props.meta	Record	Any extra details such as field errors, touched status etc. The values here depend on the form library in use. If using @prestojs/final-form see FieldRenderProps for what this will be.
*	props.multiple	boolean	Whether multiple values are accepted. In most cases you can set `limit` to `null` or a value greater than `1` instead of explicitly setting this. This can be set to `true` when `limit` is `1` in order to enforce the value being an array (eg. this could be useful if `limit` increases based on something else). If true `input.value` must be an array when set and `onChange` will be passed an array of File objects, otherwise it will be passed a single value or null. If `multiple` is `true` and `limit` is 1 then the only difference to `multiple={false}` is that the `value` will be an array. Defaults to `false` if `limit` is `1` otherwise `true`.
	props.ref	React.RefObject
	...	any	Any properties from UploadProps except for these: data method headers onChange withCredentials

On this page

Component Props: