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

With the icon

When to use

Use wje-file-upload when users need to enter values, choose options, or trigger form-related actions.

When not to use

Do not use it as a decorative element without interaction. Prefer presentational components in that case.

Accessibility

Always provide a label (label/aria-label), keep keyboard support, and surface clear validation feedback.

Best Practices

• Keep validation rules and error behavior consistent across the entire form.
• Show loading or disabled states during async operations.
• Split complex forms into smaller sections with immediate feedback.

Attributes and Properties

label

Description	Sets the user-visible or accessible label text.
Attribute	label
Type	string
Default	-

acceptedTypes

Description	The accepted file types for upload.
Attribute	accepted-types
Type	string
Default	-

chunkSize

Description	The chunk size for file upload.
Attribute	chunk-size
Type	number
Default	-

maxFileSize

Description	The maximum file size for upload.
Attribute	max-file-size
Type	number
Default	-

uploadUrl

Description	The URL to set as the upload URL.
Attribute	upload-url
Type	string
Default	-

autoProcessFiles

Description	The auto process files attribute.
Attribute	auto-process-files
Type	boolean
Default	-

noUploadButton

Description	The no upload button attribute.
Attribute	no-upload-button
Type	boolean
Default	-

Events

Name	Description
wje-file-upload:file-removed	Emitted when the wje-file-upload:file-removed event is dispatched.
wje-file-upload:files-selected	Emitted when the selection changes.
wje-file-upload:error	Emitted when the component encounters an error state.
wje-file-upload:files-added	Emitted when the wje-file-upload:files-added event is dispatched.
wje-file-upload:files-uploaded	Emitted when the wje-file-upload:files-uploaded event is dispatched.
wje-file-upload:started	Emitted when the wje-file-upload:started event is dispatched.
wje-file-upload:file-uploaded	Emitted when the wje-file-upload:file-uploaded event is dispatched.

Methods

addFilesToQueue

Description	Method to add files to the queue.
Signature	(files: any) => void

uploadFiles

Description	Method to upload files.
Signature	() => void

createPreview

Description	Method to create a preview for the file.
Signature	(file: File, reader: FileReader) => HTMLElement

createThumbnail

Description	Method to create a thumbnail for the file.
Signature	(file: File, reader: FileReader) => HTMLElement

assertFilesValid

Description	Method to validate the files.
Signature	(file: File) => void

resetFormState

Description	Method to reset the form state.
Signature	() => void

CSS Shadow Parts

Name	Description
native	The native file upload part.
file-list	The file list part.
upload-button	The label part.

CSS Custom Properties

No CSS custom properties available for this component.

Slots

Name	Description
default	This is a default/unnamed slot.