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 #
Use the disabled prop to disable any actions with a component
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| ariaRemoveFileLabel | The aria-label of the "remove file" button |
|
|
| color | Color of the component (theme string or |
|
|
| deletedFileMessage | Deleted file message |
|
|
| disabled | Applies |
|
|
| dropzone | Enables Drag&Drop |
|
|
| dropZoneText | Custom drop zone label text |
|
|
| file |
|
| |
| fileIncorrectMessage |
|
| |
| files | Files to be uploaded |
|
|
| fileTypes | Specify supported file formats |
|
|
| hideFileList | Hide file list if you want to show files somewhere else. |
|
|
| modelValue | 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 |
|
|
| undoButtonText | Cancel button text |
|
|
| undoDuration | Undoing action duration |
|
|
| uploadButtonText | Custom upload button text |
|
|
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 |