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 |