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.
This example presents the baseline file upload flow without extra customizations. It is the best starting point for understanding structure and behavior.
This example replaces image preview with an icon, which is useful for file types that do not have a meaningful visual preview.
Use wje-file-upload when users need to enter values, choose options, or trigger form-related actions.
Do not use it as a decorative element without interaction. Prefer presentational components in that case.
Always provide a label (label/aria-label), keep keyboard support, and surface clear validation feedback.
- 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.
| Description | The accepted file types for upload. |
| Attribute | accepted-types |
| Type | string |
| Default | - |
| Description | The auto process files attribute. |
| Attribute | auto-process-files |
| Type | boolean |
| Default | true |
| Description | The chunk size for file upload. |
| Attribute | chunk-size |
| Type | number |
| Default | - |
| Description | Sets the user-visible or accessible label text. |
| Attribute | label |
| Type | string |
| Default | - |
| Description | The maximum file size for upload. |
| Attribute | max-file-size |
| Type | number |
| Default | - |
| Description | Sets the maximum number of files that can be uploaded or managed. Assigns the specified value to the 'max-files' attribute. |
| Attribute | max-files |
| Type | number |
| Default | 10 |
| Description | The no upload button attribute. |
| Attribute | no-upload-button |
| Type | boolean |
| Default | false |
| Description | Sets the to-chunk attribute. |
| Attribute | to-chunk |
| Type | boolean |
| Default | false |
| Description | The URL to set as the upload URL. |
| Attribute | upload-url |
| Type | string |
| Default | /upload |
| 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. |
| Description | Method to add files to the queue. |
| Signature | (files: any) => void |
| Description | Method to upload files. |
| Signature | () => void |
| Description | Method to create a preview for the file. |
| Signature | (file: File, reader: FileReader) => HTMLElement |
| Description | Method to create a thumbnail for the file. |
| Signature | (file: File, reader: FileReader) => HTMLElement |
| Description | Method to validate the files. |
| Signature | (file: File) => void |
| Description | Method to reset the form state. |
| Signature | () => void |
| Name | Description |
|---|
native | The native file upload part. |
file-list | The file list part. |
upload-button | The label part. |
No CSS custom properties available for this component.
| Name | Description |
|---|
default | This is a default/unnamed slot. |