This has been deprecated and will be deleted in a future release. Please refrain from new implementations.
Name | Type | Required | Default | Description |
---|---|---|---|---|
accept | string | string[] | false | ||
hideDropzone | boolean | false | Hide dropzone and render only default "Attach File(s)" button. | |
hideLocalSource | boolean | false | Hide local files source in file explorer modal | |
maxFileNumber | number | false | Maximum number of files that can be selected | |
maxFileSize | number | false | Maximum file size (in bytes) | |
minFileSize | number | false | Minimum file size (in bytes) | |
uploadFile | UNSAFE_UploadFile | false | A function for manually controlling the network request for file
upload. An alternative to using | |
afterHide | Function | false | A callback to be invoked after the file explorer modal closes | |
beforeLocalFileUpload | Function | false | Optional async function that is invoked when selecting or dropping in a local file. If you want to restrict certain uploads, you can use this callback. Returning true continues the upload, while false will prevent upload. | |
dropzoneContentRenderer | Function | false | An optional content renderer for the dropzone. Accepts
| |
getEndpoint | Function | false | A function returning an upload URL for a given file. An
alternative to | |
getHeaders | Function | false | A function returning an upload request headers. Returns empty object by default. | |
getMethod | Function | false | A function returning an upload HTTP method for a given file.
Returns | |
getPayload | Function | false | A function returning an upload payload | |
getPayloadKey | Function | false | A function returning an upload payload | |
getTokenLabel | Function | false | Customize the token label for a given source value. By default,
| |
localSourceDropzoneContentRenderer | Function | false | ||
onAdd | Function | false | To be called every time when the files are uploaded directly or attached via file explorer. The input data should be appended to the current value. Files with upload errors are omitted. | |
onError | Function | false | To be called whenever an upload error occurs | |
onFileTokenClick | Function | false | To be called when attached file receives a click | |
onProgress | Function | false | To be called whenever the upload progress is changed | |
onRemove | Function | false | To be called whenever the file is removed by user from the primary token
list. Removed item should be deleted from the current value by | |
onUploadStateChange | Function | false | To be called whenever upload state is changed |
FileSelect provides ways of implementing sophisticated UX scenarios related to file selection and uploading. It provides a set of predefined source types such as TreeSource, GridSource and LocalSource, but implementors can make sources of their own, too. (see "Custom Source" section)
FileSelect is an uncontrolled component; its state can be obtained via the lifecycle hooks such onAdd, onRemove, onProgress and onError. If needed, ref can be used to control the value of file select (e.g. to set the initial value).
FileSelect handles uploading routine and stores server response under FileSelectValueEntry['response'] key. All the HTTP related settings can be configured using the following methods: getEndpoint, getPayloadKey, getPayload, getHeaders, getMethod.
maxFileNumber and accept props can be used to control the amount of files and the type of files allowed.
container prop can be used to set the container element of the modal.
Name | Type | Required | Default | Description |
---|---|---|---|---|
accept | string | string[] | false | Set accepted file types. Accepts everything if left undefined | |
maxFileSize | number | false | Maximum file size (in bytes) | |
minFileSize | number | false | Minimum file size (in bytes) | |
onCancel | ((item: ThumbnailListItem) => void) | false | ||
qa | false | |||
sourceId | string | true | ||
uploadFile | UNSAFE_UploadFile | false |
(file: File,{' '}
{`{
onProgress: (progress: number) => void
onSuccess: (response: unknown) => void
onError: (error: unknown) => void
}`}
) => string
A function for manually controlling the network request for file upload. An alternative to using getEndpoint which handles
the network request itself. | |
beforeLocalFileUpload | Function | true | Optional async function that is invoked when selecting or dropping in a
local file. If you want to restrict certain uploads, you can use this
callback. Returning true continues the upload, while false will prevent
upload.
| |
dropzoneContentRenderer | Function | false | An optional content renderer for the dropzone. Accepts{' '}
| |
getEndpoint | Function | false |
| |
getHeaders | Function | false |
| |
getMethod | Function | false |
| |
getPayload | Function | false |
| |
getPayloadKey | Function | false |
|
Name | Type | Required | Default | Description |
---|---|---|---|---|
expanded | false | Array of keys of the expanded nodes | ||
icon | ReactNode | true | ||
isLoading | boolean | false | Show/Hide loading indicator of the content | |
options | Node[] | true | ||
sourceId | string | true | ||
title | string | true | ||
getChildren | Function | false | Should return an array of children nodes.
| |
getLabel | Function | false | This function will be executed on each node. Should return{' '}
| |
getParentId | Function | false | This function can be used to override the default parent detection mechanism.
If not defined, | |
getRoot | Function | false | Function should return a single root node or an array of root nodes
| |
getType | Function | false | This function will be executed on each node. Should return{' '}
| |
isExpandable | Function | false | Function of whether to enable tree node expansion/collapsing.
| |
isSelectable | Function | false | Function of whether to enable tree node selection.
| |
onChange | Function | false | Callback function fired with currently selected array of nodes.
| |
onExpand | Function | false | Triggers when current node expand
|
Source is represented with a child component of FileSelect that registers itself via FileSelectSourceContext.register. The return value of FileSelectSourceContext.register can be used to unregister.
Sources must render themselves only when sourceId equals FileSelectSourceContext.currentSource.
When source value changes, it must call FileSelectSourceContext.onChange API with the new source value. This is required for FileSelect to keep track of added values.
Upon modal submission, FileSelect resets the value, so sources need to implement value reset logic and expose it via register.
When mapping source values to file select values, the original source values are stored under FileSelectValueEntry['origin'] key.
Source should respect maxFileNumber and not allow adding more values if its exceeded.
Sources should subscribe for reset event by using FileSelectSourceContext.onResetValue and reset their current value themselves. The return value of FileSelectSourceContext.onResetValue can be used to unsubscribe.
Set accepted file types. Accepts everything if left undefined
10.19.0