The ld-choose-file
component is a subcomponent for ld-file-upload
.
Please refer to the ld-file-upload
documentation for usage examples.
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
labelDragInstructions |
label-drag-instructions |
Label to be used as a header with instructions for drag and drop or file upload. | string |
Drag your file${ this.selectMultiple ? '(s)' : '' } here or browse |
labelSelectFile |
label-select-file |
Label to be used for the select files button. | string |
Select ${this.selectMultiple ? '' : 'a'} file${ this.selectMultiple ? '(s)' : '' } |
labelUploadConstraints |
label-upload-constraints |
Label to be used to describe upload constraints like the maximum file size. | string |
${ this.maxSize !== undefined ? 'max. $maxSize file size' : '' } |
labelUploadCount |
label-upload-count |
Label to be used to count the amount of files that have been uploaded. | string |
$filesUploaded of $filesTotal file${ this.selectMultiple ? 's' : '' } uploaded. |
labelUploadFile |
label-upload-file |
Label to be used for the upload files button. | string |
Upload ${this.selectMultiple ? '' : 'a'} file${ this.selectMultiple ? '(s)' : '' } |
labelUploadPercentage |
label-upload-percentage |
Label to be used to show the total upload percentage. | string |
$uploadProgress % uploaded. |
labelUploadState |
label-upload-state |
Label to be used for the upload state header. | string |
Upload state: |
maxSize |
max-size |
Max. file size in bytes | number |
undefined |
ref |
ref |
reference to component | any |
undefined |
selectMultiple |
select-multiple |
selectMultiple defines whether selection of multiple input files is allowed. | boolean |
false |
size |
size |
Size of the choose file area | "bg" | "sm" |
'bg' |
startUpload |
start-upload |
startUpload defines whether upload starts immediately after choosing files or after confirmation. | boolean |
false |
startUploadClicked |
start-upload-clicked |
contineClicked defines whether start upload button has been clicked while startUpload = false | boolean |
false |
uploadFiles |
-- | Chosen Files | UploadItem[] |
[] |
uploadItems |
-- | Chosen Files from the parent component | UploadItem[] |
[] |
Event | Description | Type |
---|---|---|
ldchoosefiles |
Emitted after dropping a file in the drop area. | CustomEvent<FileList> |
lduploadclick |
Emitted on upload click. | CustomEvent<any> |
graph TD;
ld-choose-file --> ld-typo
ld-choose-file --> ld-button
ld-file-upload --> ld-choose-file
style ld-choose-file fill:#f9f,stroke:#333,stroke-width:4px
Built with StencilJS