File upload
The File upload component allows users to attach multiple files to a form via drag-and-drop or by browsing the device.
import { ... } from '@ag.ds-next/react/file-upload';Usage
File upload components can be imported via the file-upload entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/file-upload';Props
| Prop | Type | Description |
|---|---|---|
| label | string | Describes the purpose of the field. |
| onChange | (value: FileWithStatus[]) => void | Callback for when an accepted file is added or removed |
| accept? | ("application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document" | "application/pdf" | "application/rtf" | "application/vnd.ms-excel" | ... 24 more ... | CustomFileMimeType)[] | List of acceptable file MIME types, e.g. `image/jpeg`, `application/pdf`. |
| disabled? | boolean | |
| existingFiles? | ExistingFile[] | Used to display a list of files that have already been uploaded. |
| hideOptionalLabel? | boolean | If true, "(optional)" will never be appended to the label. |
| hideThumbnails? | booleanDefault: false | If true, the thumbnails will be hidden. |
| hint? | string | Provides extra information about the field. |
| id? | string | |
| invalid? | boolean | If true, the invalid state will be rendered. |
| maxFiles? | number | The maximum number of files allowed to be selected. By default there is no limit (if `multiple` is true). |
| maxSize? | number | The maximum allowed size for each file, measured in KB |
| message? | string | Message to show when the field is invalid. |
| multiple? | boolean | Whether multiple files are allowed to be selected. |
| name? | string | |
| onBlur? | FocusEventHandler<HTMLInputElement> | |
| onFocus? | FocusEventHandler<HTMLInputElement> | |
| onRemoveExistingFile? | ((file: ExistingFile) => void) | Callback function called when an existing file is removed. |
| ref? | Ref<HTMLInputElement> | |
| required? | boolean | If false, "(optional)" will be appended to the label. |
| value? | FileWithStatus[]Default: [] | The value of the input |
Source
You can view the full source code for this package on Github.