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.
| Description | A comma-separated string of accepted file types (e.g. 'image/*,.pdf,.doc'). |
| Attribute | accepted-types |
| Type | string |
| Default | "" |
| Description | The size in bytes of a portion of the file for uploading in chunks. |
| Attribute | chunk-size |
| Type | number |
| Default | 1048576 |
| Description | Maximum allowed file size in MB. |
| Attribute | max-file-size |
| Type | number |
| Default | 1 |
| Description | The URL of the server to which the files will be uploaded. |
| Attribute | upload-url |
| Type | string |
| Default | "/upload" |
| Description | If true, the files will start uploading automatically when added. |
| Attribute | auto-process-files |
| Type | boolean |
| Default | true |
| Description | If true, the button to start recording is not displayed. |
| Attribute | no-upload-button |
| Type | boolean |
| Default | false |
| Description | If true, the files will be uploaded in batches. If false, the file will be uploaded one at a time. |
| Attribute | to-chunk |
| Type | boolean |
| Default | false |
| Description | Text label for the record button. If not specified, the translation from the localization is used. |
| Attribute | label |
| Type | string |
| Default | undefined |
| Name | Description |
|---|
file-upload:upload-started | Called when you start uploading a file. |
file-upload:uploaded-file-complete | Called after one file has been successfully uploaded. |
file-upload:files-added | Called after adding files to the queue (via input or drag & drop). |
file-upload:all-files-uploaded | Called after all files in the queue have been successfully uploaded. |
| Description | Adds files to the upload queue. |
| Signature | (files: FileList) => void |
| Description | Starts uploading files from the queue. |
| Signature | () => void |
| Description | Resets the form state and removes the displayed file thumbnails. |
| Signature | () => void |
| Name | Description |
|---|
native | The main container of the element. |
label | An area for uploading files that contains a slot and a button. |
file-label | Alias for label part. |
items | Container for the list of files to be uploaded (item slot). |
upload-button | Button to start file selection. |
No CSS custom properties available for this component.
| Name | Description |
|---|
| `` | The default slot for the content that appears in the upload area (e.g. the text 'Drag files here'). |
item | Slot for displaying individual items of uploaded files (elements wje-file-upload-item). |