Figma
Star457

File Uploader

Peer review pending

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

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

element

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

Type
string
Default
'FILE_UPLOADER_ITEMS_LIST'

FileUploaderItemDescription

FileUploaderItemDescription page anchor

element

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

Type
string
Default
'FILE_UPLOADER_ITEM_DESCRIPTION'

element

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

Type
string
Default
'FILE_UPLOADER_ITEM_TITLE'

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

FileUploaderDropzoneText

FileUploaderDropzoneText page anchor

element

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

Type
string
Default
'FILE_UPLOADER_DROPZONE_TEXT'

element

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

Type
string
Default
'FILE_UPLOADER_ERROR_TEXT'

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.