FileUpload
<ts-file-upload> vv0.4.0
The ts-file-upload component.
Open in Storybook for interactive demos.
Preview
Section titled “Preview”<ts-file-upload label="Drop files here or click to upload">Content</ts-file-upload>Properties
Section titled “Properties”| 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. |
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. |
Events
Section titled “Events”| Event | Detail | Bubbles | Composed | Description |
|---|---|---|---|---|
tsChange | { files: File[]; } | Yes | Yes | Emitted when files are selected or dropped. |
| Name | Description |
|---|---|
*(default)* | Default slot for custom dropzone content. |
CSS Parts
Section titled “CSS Parts”Use ::part() to style internal elements:
| Part | Description |
|---|---|
dropzone | The dropzone area. |
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">Content</TsFileUpload>