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 |
|---|---|---|---|
| aria-remove-file-label | The aria-label of the "remove file" button |
|
|
| color | Color of the component (theme string or |
|
|
| deleted-file-message | Deleted file message |
|
|
| disabled | Applies |
|
|
| drop-zone-text | Custom drop zone label text |
|
|
| dropzone | Enables Drag&Drop |
|
|
| file |
|
| |
| file-types | Specify supported file formats |
|
|
| files | Files to be uploaded |
|
|
| hide-file-list | Hide file list if you want to show files somewhere else. |
|
|
| model-value | The value of the |
|
|
| preset | Named preset combination of component props. |
| - |
| type | Specify the format of component. Supported types are |
|
|
| undo | Enables the canceling of the removing action for the added files |
|
|
| undo-button-text | Cancel button text |
|
|
| undo-duration | Undoing action duration |
|
|
| upload-button-text | Custom upload button text |
|
|
Events #
| Name | Description |
|---|---|
file-added | Emits after files are added |
file-removed | Emits after file is removed |
fileAdded | Emits after files are added. The event argument is: |
fileRemoved | Emits after file is removed. The event argument is: |
update-model-value | 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 |