Skip to contentSkip to navigationSkip to topbar
Paste assistant Assistant
Figma
Star

File Picker

Version 4.1.0GithubStorybookPeer review pending

A File Picker is a form element used to upload files.

Installation

Installation page anchor
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>
  </>
);

FilePicker

FilePicker page anchor

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'

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
any
Default
'FILEPICKER_BUTTON'