Skip to main content

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

Attributes and Properties

acceptedTypes

DescriptionA comma-separated string of accepted file types (e.g. 'image/*,.pdf,.doc').
Attributeaccepted-types
Typestring
Default""

chunkSize

DescriptionThe size in bytes of a portion of the file for uploading in chunks.
Attributechunk-size
Typenumber
Default1048576

maxFileSize

DescriptionMaximum allowed file size in MB.
Attributemax-file-size
Typenumber
Default1

uploadUrl

DescriptionThe URL of the server to which the files will be uploaded.
Attributeupload-url
Typestring
Default"/upload"

autoProcessFiles

DescriptionIf true, the files will start uploading automatically when added.
Attributeauto-process-files
Typeboolean
Defaulttrue

noUploadButton

DescriptionIf true, the button to start recording is not displayed.
Attributeno-upload-button
Typeboolean
Defaultfalse

toChunk

DescriptionIf true, the files will be uploaded in batches. If false, the file will be uploaded one at a time.
Attributeto-chunk
Typeboolean
Defaultfalse

label

DescriptionText label for the record button. If not specified, the translation from the localization is used.
Attributelabel
Typestring
Defaultundefined

Events

NameDescription
file-upload:upload-startedCalled when you start uploading a file.
file-upload:uploaded-file-completeCalled after one file has been successfully uploaded.
file-upload:files-addedCalled after adding files to the queue (via input or drag & drop).
file-upload:all-files-uploadedCalled after all files in the queue have been successfully uploaded.

Methods

addFilesToQueue

DescriptionAdds files to the upload queue.
Signature(files: FileList) => void

uploadFiles

DescriptionStarts uploading files from the queue.
Signature() => void

resetFormState

DescriptionResets the form state and removes the displayed file thumbnails.
Signature() => void

CSS Shadow Parts

NameDescription
nativeThe main container of the element.
labelAn area for uploading files that contains a slot and a button.
file-labelAlias for label part.
itemsContainer for the list of files to be uploaded (item slot).
upload-buttonButton to start file selection.

CSS Custom Properties

No CSS custom properties available for this component.

Slots

NameDescription
``The default slot for the content that appears in the upload area (e.g. the text 'Drag files here').
itemSlot for displaying individual items of uploaded files (elements wje-file-upload-item).