FileUpload

shadow

Komponent FileUpload poskytuje univerzálnu funkciu nahrávania súborov pre webové aplikácie. Podporuje prispôsobiteľné atribúty, ako sú povolené typy súborov, veľkosť častí alebo tiež maximálnu veľkosť súboru, spolu s metódami drag-and-drop a tradičným výberom súborov.

Základné použitie

Ukážka predstavuje základný flow nahrávania súborov bez dodatočných úprav. Je to dobrý štart pre pochopenie štruktúry aj správania komponentu.

Validačné chyby

Pri nepodporovanom type súboru, príliš veľkom súbore alebo prekročení limitu počtu súborov komponent zobrazí čitateľnú správu priamo v dropzone. Texty sa berú z lokalizačných kľúčov wj.file.upload.error.invalid.type, wj.file.upload.error.file.too.large, wj.file.upload.error.max.files a wj.file.upload.error.generic. Chybový blok je dostupný cez CSS shadow part error-message, takže ho môžete zladiť s dizajnom formulára bez zásahu do logiky uploadu.

S ikonou

Ukážka nahrádza náhľad ikonou, čo sa hodí najmä pre typy súborov, ktoré nemajú zmysluplný preview obrázok.

Kedy použiť

Použite wje-file-upload, keď používateľ zadáva hodnotu, vyberá možnosti alebo vykonáva akciu vo formulári.

Kedy nepoužiť

Nepoužívajte ho len ako vizuálny dekoratívny prvok bez interakcie. V takom prípade uprednostnite prezentačné komponenty.

Prístupnosť

Vždy prepojte komponent s popisom (label/aria-label), zachovajte ovládanie klávesnicou a pri validačných chybách zobrazte zrozumiteľnú správu.

Odporúčané postupy

• Majte jednotné validačné pravidlá a error stavy naprieč celým formulárom.
• Pri asynchrónnych operáciách zobrazte stav načítania alebo disabled stav.
• Pri zložitých formulároch preferujte menšie sekcie a okamžitú spätnú väzbu.

Atribúty a vlastnosti

acceptedTypes

Popis	Nastavuje textovú hodnotu uloženú vo voľbe accepted-types.
Atribút	accepted-types
Typ	string
Predvolené	-

autoProcessFiles

Popis	Určuje, či je voľba auto-process-files zapnutá a ovplyvňuje správanie komponentu.
Atribút	auto-process-files
Typ	boolean
Predvolené	true

chunkSize

Popis	Nastavuje rozmery alebo veľkosť pre voľbu chunk-size.
Atribút	chunk-size
Typ	number
Predvolené	-

label

Popis	Nastavuje zobrazený alebo prístupný textový štítok.
Atribút	label
Typ	string
Predvolené	-

maxFileSize

Popis	Nastavuje rozmery alebo veľkosť pre voľbu max-file-size.
Atribút	max-file-size
Typ	number
Predvolené	-

maxFiles

Popis	Nastavuje číselnú hodnotu používanú vo voľbe max-files.
Atribút	max-files
Typ	number
Predvolené	10

noUploadButton

Popis	Určuje, či je voľba no-upload-button zapnutá a ovplyvňuje správanie komponentu.
Atribút	no-upload-button
Typ	boolean
Predvolené	false

toChunk

Popis	Určuje, či je voľba to-chunk zapnutá a ovplyvňuje správanie komponentu.
Atribút	to-chunk
Typ	boolean
Predvolené	false

uploadUrl

Popis	Nastavuje odkaz na zdroj pre voľbu upload-url.
Atribút	upload-url
Typ	string
Predvolené	/upload

Udalosti

Názov	Popis
wje-file-upload:file-removed	Vyvolá sa pri odoslaní udalosti wje-file-upload:file-removed.
wje-file-upload:files-selected	Vyvolá sa pri zmene výberu.
wje-file-upload:error	Vyvolá sa pri chybovom stave komponentu.
wje-file-upload:files-added	Vyvolá sa pri odoslaní udalosti wje-file-upload:files-added.
wje-file-upload:files-uploaded	Vyvolá sa pri odoslaní udalosti wje-file-upload:files-uploaded.
wje-file-upload:started	Vyvolá sa pri odoslaní udalosti wje-file-upload:started.
wje-file-upload:file-uploaded	Vyvolá sa pri odoslaní udalosti wje-file-upload:file-uploaded.

Metódy

addFilesToQueue

Popis	Pridá files to queue do spravovanej kolekcie komponentu.
Signatúra	(files: any) => void

uploadFiles

Popis	Spustí metódu uploadFiles na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

createPreview

Popis	Vytvorí preview a pripojí ho do štruktúry komponentu.
Signatúra	(file: File, reader: FileReader) => HTMLElement

createThumbnail

Popis	Vytvorí thumbnail a pripojí ho do štruktúry komponentu.
Signatúra	(file: File, reader: FileReader) => HTMLElement

assertFilesValid

Popis	Spustí metódu assertFilesValid na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(file: File) => void

resetFormState

Popis	Obnoví form state na počiatočné hodnoty.
Signatúra	() => void

showError

Popis	Zobrazí error v používateľskom rozhraní komponentu.
Signatúra	(error: object｜Error) => void

clearError

Popis	Vyčistí error a obnoví súvisiace hodnoty.
Signatúra	() => void

getErrorMessage

Popis	Vráti error message z aktuálneho stavu komponentu.
Signatúra	(error: object｜Error) => string

CSS tieňové časti

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.
file-list	Štýluje shadow časť file-list.
upload-button	Štýluje shadow časť upload-button.

CSS vlastné premenné

Názov	Popis
--wje-file-upload-padding	Vlastná CSS premenná, ktorá riadi padding.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.