FileUpload

<ts-file-upload> vv0.6.3

The ts-file-upload component.

Open in Storybook for interactive demos.

Preview

<ts-file-upload label="Drop files here or click to upload">Content</ts-file-upload>

Property	Attribute	Type	Default	Description
`accept`	`accept`	`string \| undefined`	—	Accepted file types (e.g. ‘.jpg,.png’).
`disabled`	`disabled`	`boolean`	`false`	Whether the file upload is disabled.
`label`	`label`	`string`	`'Drop files here or click to upload'`	Label text for the dropzone.
`maxFiles`	`max-files`	`number \| undefined`	—	Maximum number of files allowed.
`maxSize`	`max-size`	`number \| undefined`	—	Maximum file size in bytes.
`multiple`	`multiple`	`boolean`	`false`	Whether multiple files can be selected.
`name`	`name`	`string \| undefined`	—	Form field name.
`showFileList`	`show-file-list`	`boolean`	`true`	Whether to show the file list below the dropzone.

Event	Detail	Bubbles	Composed	Description
`tsChange`	`\{ files: File[]; \}`	Yes	Yes	Emitted when files are selected or dropped.
`tsRemove`	`\{ file: File; files: File[]; \}`	Yes	Yes	Emitted when a file is removed from the list.

Name	Description
`(default)`	Default slot for custom dropzone content.

Use ::part() to style internal elements:

Part	Description
`dropzone`	The dropzone area.
`file-item`	An individual file item.
`file-list`	The file list container.
`file-remove`	The remove button for a file item.
`input`	The hidden file input.
`label`	The label text.

ts-file-upload::part(dropzone) {
  /* your custom styles */
}

<ts-file-upload label="Drop files here or click to upload">Content</ts-file-upload>

import { TsFileUpload } from '@tessera-ui/react';

<TsFileUpload label="Drop files here or click to upload" showFileList>Content</TsFileUpload>