File Upload #
The va-file-upload
component is an input for selecting and uploading files with a richer interface than the default one.
Examples #
Default usage #
By default itโs displayed as a simple button to upload files.
Drag & Drop #
The dropzone
prop is used to add drag and drop possibility to the va-file-upload
component
Specify file types #
Add file-types
prop with allowed extensions to add file types validation
As gallery #
With type === gallery
prop you can show user picture preview of uploaded files
Slot #
Allows to create custom file upload area.
This is slot, click or drag'n'drop file to upload

Canceling the removing action #
Disabled #
API #
Props #
Name | Description | Types | Default |
---|---|---|---|
ariaRemoveFileLabel |
|
| |
color |
|
| |
deletedFileMessage |
|
| |
disabled |
|
| |
dropzone |
|
| |
dropZoneText |
|
| |
file |
|
| |
files |
|
| |
fileTypes |
|
| |
hideFileList |
|
| |
modelValue |
|
| |
preset |
| - | |
type |
|
| |
undo |
|
| |
undoButtonText |
|
| |
undoDuration |
|
| |
uploadButtonText |
|
|
Events #
Name | Description |
---|---|
fileAdded | Emits after files are added. The event argument is:
|
fileRemoved | Emits after file is removed. The event argument is:
|
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |
Slots #
Name | Description |
---|---|
default | Default slot allows to create custom file upload area. |
Css Variables #
Name | Default Value |
---|---|
--va-file-upload-position | relative |
--va-file-upload-margin | 0.5rem 0 |
--va-file-upload-list-margin-top | 1rem |
--va-file-upload-dropzone-border-radius | 0.375rem |
--va-file-upload-dropzone-cursor | pointer |
--va-file-upload-dropzone-text-padding-sm | 0 0 1rem |
--va-file-upload-dropzone-field-padding | 1.5rem 2rem |
--va-file-upload-dropzone-field-padding-sm | 1.5rem 1rem |
--va-file-upload-dropzone-field-button-margin | 0 |
--va-file-upload-dropzone-field-button-z-index | 10 |
--va-file-upload-dropzone-field-text-pr | 10px |
--va-file-upload-dropzone-list-padding | 0 2rem 1rem |