Upload
The Upload component is a button that when clicked, lets users upload a file. Clicking the button will open a file explorer dialogue, where users can select the file to upload.
Basic Usage
<triton-upload></triton-upload>
<TritonUpload/>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-upload></triton-upload>
</body>
</html>
Behavior
Max Count
<triton-upload maxCount={1}></triton-upload>
<triton-upload maxCount={3}></triton-upload>
File Formats
<triton-upload
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
></triton-upload>
Appearance
Skins
<triton-upload skin="primary"></triton-upload>
<triton-upload skin="secondary"></triton-upload>
<triton-upload skin="neutral"></triton-upload>
<triton-upload skin="flat"></triton-upload>
Settings
<triton-upload diabled></triton-upload>
<triton-upload></triton-upload>
API
Properties
| Property | Description | Type | Default |
|---|---|---|---|
accept | Enforces which file types to be accepted | string | '*/*' |
disabled | If true, the component will look disabled and not be interactable | boolean | false |
fluid | If true, the element fills all available width | boolean | false |
icon-leading | Icon to the left of text | Icon | - |
icon-trailing | Icon to the right of text | Icon | 'cloud-upload' |
label | If set, this text will override the default Upload label | string | 'Upload' |
max-count | Maximum simultaneous file upload countSet this to 0 if you dont want to keep track of loaded files. | number | 10 |
size | Set the size of the component | base body large medium small tiny xlarge xxlarge xxxlarge | 'body' |
skin | Set the skin of the component from preset optionsThe skin determines how the component looks | alarm critical flat information neutral primary secondary success warning | 'primary' |
Events
| Name | Type | Description | Extra |
|---|---|---|---|
| atChange | CustomEvent<File[]> | Array of files emitted on file upload | - |
Methods
| Function | Description | Params | Extra |
|---|---|---|---|
reset | Programmatically reset the value of the component | () => Promise<void> |