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 ). |