Components

File drop

Utility component that lets users upload files by dragging and dropping them into an area on a page, or by activating a button.

Basic usage

Filedrop wraps any content in a drop area. Dropped files are passed to upload one by one, and the area also contains a FileInput, so users can click to browse.

import {Filedrop, ACCEPTED_IMAGE_TYPES} from '@pleo-io/telescope'


const ReceiptDropzone = ({onUpload}: {onUpload: (file: File) => void}) => (
    <Filedrop upload={onUpload} accept={ACCEPTED_IMAGE_TYPES} name="receipt">
        Drop a receipt here or browse your files
    </Filedrop>
)

Validation

Dropped files are checked before upload is called:

Size: files larger than maxFileSizeAllowed (25 MB by default) show a negative toast and are not uploaded.
Type: when accept is set, files with another MIME type show a negative toast.
Count: with multipleFileSelection and maximumNumberOfFiles, dropping more files than allowed shows a negative toast and uploads nothing.

The toasts are shown with useToaster, so the page needs a ToasterProvider and a Toaster in the tree. Use ACCEPTED_IMAGE_TYPES for the common image and PDF formats.

Localisation

The toast messages come from the TelescopeProvider translations under FileInput, the same keys as file input.

Accessibility

The drop area is a label around the nested file input. The nested file input stays in the tab order, so keyboard users can open the file dialog with Enter or Space.
Pass aria-describedby to connect the drop area to hint or error text, and isRequired or isInvalid to reflect the form state.
Drag handlers only enhance pointer users. Always keep the browse option available.

API reference

Prop	Type	Default
`accept`	`enum`
`aria-describedby`	`enum`
`className`	`enum`
`isInvalid`	`boolean`
`isRequired`	`boolean`
`maxFileSizeAllowed`	`enum`
`maximumNumberOfFiles`	`enum`
`multipleFileSelection`	`boolean`
`name`	`enum`
`onDragLeave`	`enum`
`onDragOver`	`enum`
`onDrop`	`enum`
`onUploadButtonClick`	`enum`
`upload` (required)	`function`

Didn't find what you were looking for?

Let us know in #team-design-systems or make a request.

Edit this page