File Upload

Root · Dropzone · Item · ItemDeleteTrigger · ItemGroup · ItemName · ItemPreview · ItemPreviewImage · ItemSizeText · Label · Trigger · ClearTrigger

#ClearTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Dropzone

Prop	Type	Default	Description
`disableClick`	`boolean \| undefined`		Whether to disable the click event on the dropzone

#HiddenInput

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemDeleteTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemGroup

Prop	Type	Default	Description
`type`	`ItemType \| undefined`		—

#ItemName

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemPreviewImage

A styled part — no props of its own; it takes the anatomy's shared styling.

#ItemPreview

Prop	Type	Default	Description
`type`	`string`	`'.*'`	The file type to match against. Matches all file types by default.

#ItemSizeText

A styled part — no props of its own; it takes the anatomy's shared styling.

#Item

Prop	Type	Default	Description
`file`	`File`		—
`type`	`ItemType \| undefined`		—

#Label

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder for the trigger.
`accept`	`Record<string, string[]> \| fileUpload.FileMimeType \| fileUpload.FileMimeType[]`		The accept file types
`acceptedFiles`	`File[]`		The controlled accepted files
`allowDrop`	`boolean`	`true`	Whether to allow drag and drop in the dropzone element
`capture`	`'user' \| 'environment'`		The default camera to use when capturing media
`defaultAcceptedFiles`	`File[]`		The default accepted files
`directory`	`boolean`		Whether to accept directories, only works in webkit browsers
`disabled`	`boolean`		Whether the file input is disabled
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; dropzone: string; hiddenInput: string; trigger: string; label: string; item(id: string): string; itemName(id: string): string; itemSizeText(id: string): string; itemPreview(id: string): string; }>`		The ids of the elements. Useful for composition.
`invalid`	`boolean`		Whether the file input is invalid
`locale`	`string`	`"en-US"`	The current locale. Based on the BCP 47 definition.
`maxFiles`	`number`	`1`	The maximum number of files
`maxFileSize`	`number`	`Infinity`	The maximum file size in bytes
`minFileSize`	`number`	`0`	The minimum file size in bytes
`name`	`string`		The name of the underlying file input
`preventDocumentDrop`	`boolean`	`true`	Whether to prevent the drop event on the document
`readOnly`	`boolean`		Whether the file input is read-only
`required`	`boolean`		Whether the file input is required
`transformFiles`	`(files: File[]) => Promise<File[]>`		Function to transform the files
`translations`	`fileUpload.IntlTranslations`		The localized messages to use.
`validate`	`(file: File, details: fileUpload.FileValidateDetails) => fileUpload.FileError[] \| null`		Function to validate a file

Event	Payload
`update:acceptedFiles`	`files: File[]`
`fileAccept`	`details: FileAcceptDetails`
`fileChange`	`details: FileChangeDetails`
`fileReject`	`details: FileRejectDetails`

#Trigger

A styled part — no props of its own; it takes the anatomy's shared styling.