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

File Uploader

Version 4.1.0GithubStorybookPeer review pending

A file uploader is a form element used to upload multiple files.

Installation

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

FileUploader

FileUploader page anchor

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

element

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

Type
string
Default
'FILE_UPLOADER_HELP_TEXT'

element

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

Type
string
Default
'FILE_UPLOADER_LABEL'

element

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

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