FileUpload Item
The FileUploadItem element represents an individual item (file) within the FileUpload component. Displays details such as file name, size, upload progress, and provides actions such as deleting the file. This component is intended to be used in the context of the FileUpload component.
For more information on using FileUploadItem, navigate to the [FileUpload] element documentation(./file-upload)
Basic usage
The preview shows one item of the uploaded file in its default state, i.e. as it will appear in the list when the file is selected.
With picture
The sample uses the image variant of file-upload-item to show how a preview item differs from a generic file.
Is uploaded
The is-uploaded attribute displays the element in the uploaded file state.
When to use
Use wje-file-upload-item when the user enters a value, selects options, or performs an action on a form.
When not to use
Don't just use it as a visual decorative element without interaction. In this case, give priority to the presentation components.
Accessibility
Always link the component to the description (label/aria-label), keep keyboard control, and display a clear message on validation errors.
Recommended practices
- Keep validation rules and error states consistent across the entire form.
- For asynchronous operations, display the load status or disabled status.
- For complex forms, prefer smaller sections and immediate feedback.
Attributes and properties
isUploaded
| Popis | Určuje, či je voľba is-uploaded zapnutá a ovplyvňuje správanie komponentu. |
| Atribút | is-uploaded |
| Typ | boolean |
| Predvolené | false |
size
| Popis | Nastavuje veľkosť komponentu. |
| Atribút | size |
| Typ | string ｜ number |
| Predvolené | - |
uploaded
| Popis | Určuje, či je položka súboru už nahraná. |
| Atribút | uploaded |
| Typ | any |
| Predvolené | - |
Events
| Názov | Popis |
|---|---|
wje-button:click | Vyvolá sa pri kliknutí na tlačidlo. |
wje-file-upload-item:remove | Vyvolá sa pri odoslaní udalosti wje-file-upload-item:remove. |
Methods
Pre tento komponent nie sú dostupné žiadne verejné metódy.
CSS shadow parts
| Názov | Popis |
|---|---|
button | Štýluje shadow časť button. |
image | Štýluje shadow časť image. |
name | Štýluje shadow časť name. |
size | Štýluje shadow časť size. |
CSS custom variables
| Názov | Popis |
|---|---|
--primary-color | Vlastná CSS premenná, ktorá riadi primary color. |
Slots
| Názov | Popis |
|---|---|
img | Slot pre náhľad obrázka alebo iného média. |
action | Slot pre akčné ovládacie prvky, napríklad tlačidlá. |