File trigger API

Allows a user to access the file system with any pressable Cimpress UI component. The component doesn’t provide built-in UI for displaying selected files, it offers an onSelect callback that provides the selected FileList, allowing you to build custom file previews or upload interfaces.

Import

import { FileTrigger } from '@cimpress-ui/react';

Example

Preview

Upload

No files selected

Code

import { Button, FileTrigger, Stack, Text } from '@cimpress-ui/react';
import { useState } from 'react';

export default function Demo() {
  const [files, setFiles] = useState<File[] | null>(null);

  return (
    <Stack gap={16}>
      <FileTrigger onSelect={(fileList) => setFiles(Array.from(fileList ?? []))} allowsMultiple>
        <Button>Upload</Button>
      </FileTrigger>
      <Text as="p">
        {files == null || files.length === 0 ? 'No files selected' : files.map((file) => file.name).join(', ')}
      </Text>
    </Stack>
  );
}

Copy code Open in playground

Icon button

Preview

Code

import { FileTrigger, IconButton } from '@cimpress-ui/react';
import { IconAttachment } from '@cimpress-ui/react/icons';

export default function Demo() {
  return (
    <FileTrigger>
      <IconButton icon={<IconAttachment />} aria-label="Upload" variant="tertiary" />
    </FileTrigger>
  );
}

Copy code Open in playground

Accepted file types

Preview

Select images

Code

import { Button, FileTrigger } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <FileTrigger allowsMultiple acceptedFileTypes={['image/*']}>
      <Button>Select images</Button>
    </FileTrigger>
  );
}

Copy code Open in playground

API reference

ref Ref<HTMLInputElement>

The ref type for this component.

FileTriggerProps

acceptedFileTypes readonly string[]

Specifies what mime type of files are allowed.

allowsMultiple boolean

Whether multiple files can be selected.

defaultCamera 'user' | 'environment'

Specifies the use of a media capture mechanism to capture the media on the spot.

onSelect (files: null | FileList) => void

Handler when a user selects a file.

children ReactNode

The children of the component.

acceptDirectory boolean

Enables the selection of directories instead of individual files.