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.

Open in GitHub

Drag & Drop
#

The dropzone prop is used to add drag and drop possibility to the va-file-upload component

Drop files here to upload
Open in GitHub

Specify file types
#

Add file-types prop with allowed extensions to add file types validation

Drop files here to upload
Open in GitHub

As gallery
#

With type === gallery prop you can show user picture preview of uploaded files

Open in GitHub

Slot
#

Allows to create custom file upload area.

This is slot, click or drag'n'drop file to upload

Open in GitHub

Canceling the removing action
#

Enable gallery view
example 1.png
Open in GitHub

Disabled
#

Example
Example
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
aria-remove-file-label

The aria-label of the "remove file" button

String

"$t:removeFile"

color

Color of the component (theme string or HEX string).

String

"primary"

deleted-file-message

Deleted file message

String

"$t:fileDeleted"

disabled

Applies disabled style and removes all user interaction effects.

Boolean

false

drop-zone-text

Custom drop zone label text

String

"$t:dropzone"

dropzone

Enables Drag&Drop

Boolean

false

file

Object

null

file-types

Specify supported file formats

String

""

files

Files to be uploaded

Array

null

hide-file-list

Hide file list if you want to show files somewhere else.

Boolean

false

model-value

The value of the v-model bindings.

Object | Array

[]

preset

Named preset combination of component props.

String

-

type

Specify the format of component. Supported types are single, list and gallery

String

"list"

undo

Enables the canceling of the removing action for the added files

Boolean

false

undo-button-text

Cancel button text

String

"$t:undo"

undo-duration

Undoing action duration

Number

3000

upload-button-text

Custom upload button text

String

"$t:uploadFile"

Events #

NameDescription

file-added

Emits after files are added

file-removed

Emits after file is removed

fileAdded

Emits after files are added. The event argument is:

`(files: VaFile[]) => void`

fileRemoved

Emits after file is removed. The event argument is:

`(file: VaFile) => void`

update-model-value

The event is triggered when the component needs to change the model. Is also used by v-model

Slots #

NameDescription

default

Default slot allows to create custom file upload area.

Css Variables #

NameDefault 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