yarn add @twilio-paste/file-picker - or - yarn add @twilio-paste/core
import {FilePicker, FilePickerButton} from '@twilio-paste/core/file-picker';
import {Label} from '@twilio-paste/core/label';
import {HelpText} from '@twilio-paste/core/help-text';
const MyFilePicker = () => (
<>
<Label htmlFor="foo" required>
Profile photo
</Label>
<FilePicker id="foo" required aria-describedby="foo_text">
<FilePickerButton variant="secondary">Choose a file</FilePickerButton>
</FilePicker>
<HelpText id="foo_text">Upload an image</HelpText>
</>
);
accept
Specify the desired file type. Note: file type should still be validated server-side, as this prop is not a complete validation. Read more about the accept prop
- Type
string
disabled
Disables the File Picker.
- Type
boolean
- Default
'false'
element
Overrides the default element name to apply unique styles with the Customization Provider
- Type
any
- Default
'FILEPICKER'
i18nNoSelectionText
The text string displayed when no files are selected.
- Type
string
- Default
'No file uploaded'
name
- Type
string
onChange
Function will run when the uploaded file changes
- Type
(event: ChangeEvent<HTMLInputElement>) => void
required
Sets the File Picker as required.
- Type
boolean
- Default
'false'
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
'FILEPICKER_BUTTON'
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.