FileUpload

shadow

The FileUpload component provides a universal file upload function for web applications. It supports customizable attributes such as allowed file types, part size or also maximum file size, along with drag-and-drop methods and traditional file selection.

Basic usage

The sample represents the basic flow of uploading files without additional modifications. This is a good start for understanding both the structure and the behavior of the component.

Validation errors

When the file type is unsupported, a file is too large, or the maximum file count is exceeded, the component shows a readable message directly in the dropzone. Messages use the wj.file.upload.error.invalid.type, wj.file.upload.error.file.too.large, wj.file.upload.error.max.files, and wj.file.upload.error.generic localization keys. The error block is exposed through the error-message CSS shadow part, so it can be styled with the rest of the form without changing upload logic.

With the icon

The preview replaces the thumbnail with an icon, which is especially useful for file types that don't have a meaningful preview image.

When to use

Use wje-file-upload 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

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

Events

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.

Methods

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 shadow parts

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 custom variables

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

Slots

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