yarn add @twilio-paste/file-uploader - or - yarn add @twilio-paste/core
import {
FileUploader,
FileUploaderLabel,
FileUploaderHelpText,
FileUploaderDropzone,
FileUploaderDropzoneText,
} from '@twilio-paste/core/file-uploader';
const MyFileUploader = () => (
<FileUploader name="Default File Uploader">
<FileUploaderLabel>Upload files</FileUploaderLabel>
<FileUploaderHelpText>Files can be up to 50 MB.</FileUploaderHelpText>
<FileUploaderDropzone acceptedMimeTypes={['image/*', 'application/pdf']}>
<FileUploaderDropzoneText>Browse files or drag them here</FileUploaderDropzoneText>
</FileUploaderDropzone>
</FileUploader>
);
name RequiredRequired
The name for the input within the FileUploader
- Type
string
disabled
Disables the FileUploader
- Type
boolean
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'FILE_UPLOADER'
id
The id of the FileUploader. Used to create ids for the elements within the FileUploader.
- Type
string
required
If the FileUploader is required.
- Type
boolean
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'FILE_UPLOADER_HELP_TEXT'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'FILE_UPLOADER_ITEM'
fileIcon
The icon displayed when it is not loading or error variant.
- Type
NonNullable<ReactNode>
i18nButtonText
The hidden text for the dismiss button
- Type
string- Default
'Remove file'
i18nErrorText
The hidden text for the error icon
- Type
string- Default
'(error)'
i18nLoadingText
The hidden text for the loading spinner
- Type
string- Default
'(loading)'
onButtonClick
- Type
() => void
variant
The variant of FileUploaderItem
- Type
"default" | "error" | "loading"- Default
'default'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'FILE_UPLOADER_ITEMS_LIST'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'FILE_UPLOADER_ITEM_DESCRIPTION'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'FILE_UPLOADER_ITEM_TITLE'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
acceptedMimeTypes RequiredRequired
The allowed mime types for the input. It is convereted to a string and passed to the accept attribute.
- Type
string[]
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'FILE_UPLOADER_DROPZONE'
onDragEnd
A function that runs on drag leave on the label that wraps the FileUploaderDropzone
- Type
(event: DragEvent<HTMLLabelElement>) => void
onDragEnter
A function that runs on drag leave on the label that wraps the FileUploaderDropzone
- Type
(event: DragEvent<HTMLLabelElement>) => void
onDragLeave
A function that runs on drag leave on the label that wraps the FileUploaderDropzone
- Type
(event: DragEvent<HTMLLabelElement>) => void
onDragOver
A function that runs on drag over on the label that wraps the FileUploaderDropzone
- Type
(event: DragEvent<HTMLLabelElement>) => void
onDragStart
A function that runs on drag leave on the label that wraps the FileUploaderDropzone
- Type
(event: DragEvent<HTMLLabelElement>) => void
onDrop
A function that runs on drop on the label that wraps the FileUploaderDropzone
- Type
(event: DragEvent<HTMLLabelElement>) => void
onInputChange
A function that runs when the input within the Dropzone is changed
- Type
(event: ChangeEvent<HTMLInputElement>) => void
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'FILE_UPLOADER_DROPZONE_TEXT'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any- Default
'FILE_UPLOADER_ERROR_TEXT'
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.