Theme

Button Variant Rename

Banner Description Prop

Getting started

Breaking changes

Style utilities

DescriptionList

OptionCardGroup

SegmentedControl

FormattedDateTime

FormattedRelativeTime

KeyboardShortcut

StatusIndicator

ConfirmationModal

Ember Floating UI

Ember prop spreading

tooltip-custom-interactive

no-banned-imports

enforce-pluma-elements

no-deprecated-apis

no-deprecated-icons

no-raw-pluma-classnames

no-raw-pluma-css-variables

require-form-control-label

prefer-managed-modals

PopoverPrimitive

Componentsv2.189.1

Iconsv1.19.0

MCPv0.8.62

Tokensv0.34.3

FileField

FileField lets people choose files from their device, either through a button or a drag-and-drop area.

Usage

import { PlumaTestHelpers } from '@customerio/pluma-components/react/test-helpers/pluma-test-helpers'

const fileField = PlumaTestHelpers.extract('FileField', screen.getByTestId('data-test-file-field'));

// Choose a file (as if from the native picker)
await fileField.selectFile({ content: 'hello', name: 'hello.png', type: 'image/png' });

// Or drop one onto the dropzone
await fileField.dropFile({ name: 'photo.png', type: 'image/png' });

Methods

selectFile(file) / selectFiles(files) — select one or more files through the hidden file input, as if chosen from the native picker. Each argument is a File or a { content?, name?, type? } descriptor.
dropFile(file) / dropFiles(files) — drop one or more files onto the dropzone (type="dropzone").
clickDelete() — click the "Delete" control shown in the image-preview state (when selectedImageUrl is set).
getIsDisabled() — whether the input is disabled.
hasError() / getError() — whether an error message is shown, and its text.
hasImagePreview() / getSelectedImageUrl() — whether an image preview is shown, and its src.
getShowsInvalidType() — whether the "invalid file type" feedback is showing (e.g. after dropping an unaccepted file).

Test Helpers

`FileFieldTestHelpers`

`clickDelete`() `=> Promise<void>`

Clicks the "Delete" control shown in the image-preview state (when `selectedImageUrl` is set).

`dropFile`
(
`file:File | FileFieldTestFile`
)
`=> Promise<void>`

Drops a file onto the dropzone, as if drag-and-dropped.

`dropFiles`
(
`files:(File | FileFieldTestFile)[]`
)
`=> Promise<void>`

Drops one or more files onto the dropzone, as if drag-and-dropped.

`getError`() `=> string | null`

Gets the error message text shown below the field, if any.

`getIsDisabled`() `=> boolean`

Whether the file input is disabled.

`getSelectedImageUrl`() `=> string | null`

Gets the URL of the previewed image (in the dropzone image preview state), if any.

`getShowsInvalidType`() `=> boolean`

Whether the dropzone is showing the "invalid file type" feedback (e.g. after dropping a file whose type isn't accepted).

`hasError`() `=> boolean`

Whether the field is showing an error message.

`hasImagePreview`() `=> boolean`

Whether the dropzone is showing an image preview.

`selectFile`
(
`file:File | FileFieldTestFile`
)
`=> Promise<void>`

Selects a file through the (hidden) file input, as if it had been chosen from the native file picker.

`selectFiles`
(
`files:(File | FileFieldTestFile)[]`
)
`=> Promise<void>`

Selects multiple files through the (hidden) file input. Use with `allowMultiple`.

On this page