Skip to content
Cimpress UI

File picker API

Usage guidelinesAPI

Import

Section titled “Import”
import { UNSTABLE_FilePicker } from '@cimpress-ui/react';

Forms

Section titled “Forms”

File picker can integrate with native HTML forms. See our forms guide to learn how to work with forms.

API reference

Section titled “API reference”
ref
Section titled “ ref ”
Ref<HTMLDivElement>

The ref type for this component.

UNSTABLE_FilePickerProps
isDisabled
Section titled “ isDisabled ”
boolean

Whether the field is disabled.

isRequired
Section titled “ isRequired ”
boolean

Whether the field is required.

isInvalid
Section titled “ isInvalid ”
boolean

Whether the field is invalid.

acceptedFileTypes
Section titled “ acceptedFileTypes ”
string[]

The allowed file types that can be selected.

allowsMultiple
Section titled “ allowsMultiple ”
boolean

Whether multiple files can be selected.

onSelect
Section titled “ onSelect ”
(files: File[] | null) => void

Handler called when files are selected.

id
Section titled “ id ”
string

The element's unique identifier. See MDN.

data-cim-style-root
Section titled “ data-cim-style-root ”
boolean

Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.

UNSAFE_className
Section titled “ UNSAFE_className ”
string

Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.

UNSAFE_style
Section titled “ UNSAFE_style ”
CSSProperties

Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

label
Section titled “ label ”
string

The content to display as the label.

aria-labelledby
Section titled “ aria-labelledby ”
string

Identifies the element (or elements) that labels the current element.

aria-describedby
Section titled “ aria-describedby ”
string

Identifies the element (or elements) that describes the object.

aria-details
Section titled “ aria-details ”
string

Identifies the element (or elements) that provide a detailed, extended description for the object.

form
Section titled “ form ”
string

The <form> element to associate the input with. The value of this attribute must be the id of a <form> in the same document. See MDN.

name
Section titled “ name ”
string

The name of the input element, used when submitting an HTML form. See MDN.

description
Section titled “ description ”
string

A description for the field. Provides a hint such as specific requirements for what to choose.

error
Section titled “ error ”
FieldError

An error message for the field.

validate
Section titled “ validate ”
(value: File[]) => string | true | string[] | undefined

A function that returns an error message (or true) if a given value is invalid. Validation errors are displayed to the user when the form is submitted. For real-time validation, use the error prop instead.

defaultCamera
Section titled “ defaultCamera ”
'user' | 'environment'

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

acceptDirectory
Section titled “ acceptDirectory ”
boolean

Enables the selection of directories instead of individual files.

StyleProps
margin
Section titled “ margin ”
Responsive<Spacing | "auto">

The amount of margin applied to all edges of this component.

marginX
Section titled “ marginX ”
Responsive<Spacing | "auto">

The amount of margin applied to the left and right edges of this component. Takes priority over margin.

marginY
Section titled “ marginY ”
Responsive<Spacing | "auto">

The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.

marginTop
Section titled “ marginTop ”
Responsive<Spacing | "auto">

The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.

marginRight
Section titled “ marginRight ”
Responsive<Spacing | "auto">

The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.

marginBottom
Section titled “ marginBottom ”
Responsive<Spacing | "auto">

The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.

marginLeft
Section titled “ marginLeft ”
Responsive<Spacing | "auto">

The amount of margin applied to the left edge of this component. Takes priority over marginX and margin.