File input

Basic usage

FileInput renders a visually hidden native file input over its children, so the children act as the visible trigger. Pass maxFilesize in bytes, which is the only required prop, and handle the selected file in onChange.

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


const ReceiptUpload = ({onUpload}: {onUpload: (file: File) => void}) => (
    <FileInput
        name="receipt"
        maxFilesize={10 * 1024 * 1024}
        accept={ACCEPTED_IMAGE_TYPES}
        onChange={onUpload}
    >
        <Button variant="primary">Browse</Button>
    </FileInput>
)

Children are optional. Without them, the file input fills the area of the wrapper and needs its own aria-label.

Validation

FileInput checks each selected file before calling onChange:

• Size: files larger than maxFilesize are rejected. onFileTooLarge receives a message such as "Maximum file size is 10 MB.", and a negative toast explains the file size.
• Type: when accept is set, files whose MIME type is not listed are rejected with a negative toast. ACCEPTED_IMAGE_TYPES covers common image formats and PDF.
• Count: with multipleFileSelection and maximumNumberOfFiles, selecting more files than allowed shows a negative toast and does not call onChange.

The toasts are shown with useToaster, so the page needs a ToasterProvider and a Toaster in the tree. Filedrop uses the same validation for drag and drop, and is documented in the file drop guidelines.

Localisation

The messages come from the TelescopeProvider translations under FileInput: Or, MaxFileSize, MaxFileSizeMessage, FileTooLargeTitle, FileTooLarge, WrongFileTypeTitle, WrongFileType, TooManyFilesTitle and TooManyFiles.

Accessibility

• The native file input stays in the tab order, so keyboard users can open the file dialog with Enter or Space.
• When the file input wraps children, it is named after them. Pass aria-label to name it explicitly, which takes precedence.
• isRequired, isInvalid and aria-describedby are forwarded to the file input.
• The focus ring is shown on the children when the file input has keyboard focus.

API reference