Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

File Uploader

Peer review pending

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

Version 4.1.0
Github
Storybook

Installation

Installation page anchor
yarn add @twilio-paste/file-uploader - or - yarn add @twilio-paste/core

Usage

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

Props

Props page anchor

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

FileUploaderHelpText

FileUploaderHelpText page anchor

element

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

Type
string
Default
'FILE_UPLOADER_HELP_TEXT'

FileUploaderLabel

FileUploaderLabel page anchor

element

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

Type
string
Default
'FILE_UPLOADER_LABEL'

FileUploaderItem

FileUploaderItem page anchor

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'

FileUploaderItemsList

FileUploaderItemsList page anchor

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'

FileUploaderItemTitle

FileUploaderItemTitle page anchor

element

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

Type
string
Default
'FILE_UPLOADER_ITEM_TITLE'

FileUploaderDropzone

FileUploaderDropzone page anchor

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'

FileUploaderErrorText

FileUploaderErrorText page anchor

element

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

Type
string
Default
'FILE_UPLOADER_ERROR_TEXT'