Skip to main content

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

S ikonou

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

label

PopisNastavuje zobrazený alebo prístupný textový štítok.
Atribútlabel
Typstring
Predvolené-

acceptedTypes

PopisNastavuje textovú hodnotu uloženú vo voľbe accepted-types.
Atribútaccepted-types
Typstring
Predvolené-

chunkSize

PopisNastavuje rozmery alebo veľkosť pre voľbu chunk-size.
Atribútchunk-size
Typnumber
Predvolené-

maxFileSize

PopisNastavuje rozmery alebo veľkosť pre voľbu max-file-size.
Atribútmax-file-size
Typnumber
Predvolené-

uploadUrl

PopisNastavuje odkaz na zdroj pre voľbu upload-url.
Atribútupload-url
Typstring
Predvolené-

autoProcessFiles

PopisUrčuje, či je voľba auto-process-files zapnutá a ovplyvňuje správanie komponentu.
Atribútauto-process-files
Typboolean
Predvolené-

noUploadButton

PopisUrčuje, či je voľba no-upload-button zapnutá a ovplyvňuje správanie komponentu.
Atribútno-upload-button
Typboolean
Predvolené-

Udalosti

NázovPopis
wje-file-upload:file-removedVyvolá sa pri odoslaní udalosti wje-file-upload:file-removed.
wje-file-upload:files-selectedVyvolá sa pri zmene výberu.
wje-file-upload:errorVyvolá sa pri chybovom stave komponentu.
wje-file-upload:files-addedVyvolá sa pri odoslaní udalosti wje-file-upload:files-added.
wje-file-upload:files-uploadedVyvolá sa pri odoslaní udalosti wje-file-upload:files-uploaded.
wje-file-upload:startedVyvolá sa pri odoslaní udalosti wje-file-upload:started.
wje-file-upload:file-uploadedVyvolá sa pri odoslaní udalosti wje-file-upload:file-uploaded.

Metódy

addFilesToQueue

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

uploadFiles

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

createPreview

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

createThumbnail

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

assertFilesValid

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

resetFormState

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

CSS tieňové časti

NázovPopis
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é

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Sloty

NázovPopis
defaultPredvolený slot pre hlavný obsah komponentu.