File upload
Description
<jp-file-upload> is a component with functionality of <input type="file">, but also supports url links.
Attributes
| Name | Required | Type | Description |
|---|---|---|---|
| id | string | unique identifier | |
| value | string | setter | |
| label | string | label of the input field | |
| labelType | 'outside' or 'inside' | whether label is inside or outside of the field | |
| service | ✓ | FileService | file service |
| name | ✓ | string | name of the form control |
Interfaces
FileService
Defines the accepted file types and provides a method to upload a file.
Properties
| Name | Required | Type | Description |
|---|---|---|---|
| acceptedFiles | ✓ | string | defines acceptable file types |
| maxSize | number | max file size in bytes | |
| uploadFile | (file: any, id?: string) => Promise<string> | uploads a file and returns a promise which is a string that represents a link to the file location |
Slots
This component does not have any slots.
Methods
This component does not have any methods.
Events
getValue- returns form field value
value- triggers when value (file) changes
rejected- triggers when added file is not accepted because it does not satisfy some service criteria
Demo
Live Editor
// import '@jaspero/web-components/file-upload.wc.js'; // import '@jaspero/web-components/file-upload.css'; <jp-file-upload label="Upload a file"></jp-file-upload>
Result
Loading...