Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

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

Usage

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

Props

Props page anchor

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
string
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'

FilePickerButton

FilePickerButton page anchor

variant RequiredRequired

Type
| "link" | "reset" | "primary" | "primary_icon" | "secondary" | "secondary_icon" | "destructive" | "destructive_icon" | "destructive_link" | "destructive_secondary" | "inverse_link" | "inverse"
Default
'primary'

as

The HTML tag to replace the default <button> tag.

Type
keyof IntrinsicElements
Default
'button'

disabled

Prevent actions from firing on this Button

Type
boolean

element

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

Type
string
Default
'FILEPICKER_BUTTON'

fullWidth

Sets the Button width to 100% of the parent container.

Type
boolean

href

A URL to route to. Must use as="a" for this prop to work.

Type
string
Default
null

i18nExternalLinkLabel

Title for showExternal icon

Type
string
Default
'(link takes you to an external page)'

loading

Prevent actions and show a loading spinner

Type
boolean

pressed

Sets the aria-pressed attribute. Must be used with 'secondary' or 'secondary_icon' variants.

Type
boolean

size

Type
ButtonSizes
Default
'default'

tabIndex

Type
ButtonTabIndexes

target

Type
string

type

Use at least one submit button per <form>. Outside of forms use button (default).

Type
ButtonTypes
Default
'button'