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
ariaRemoveFileLabel

String

"$t:removeFile"

color

String

"primary"

deletedFileMessage

String

"$t:fileDeleted"

disabled

Boolean

false

dropzone

Boolean

false

dropZoneText

String

"$t:dropzone"

file

Object

null

files

Array

null

fileTypes

String

""

hideFileList

Boolean

false

modelValue

Object | Array

[]

preset

String

-

type

String

"list"

undo

Boolean

false

undoButtonText

String

"$t:undo"

undoDuration

Number

3000

uploadButtonText

String

"$t:uploadFile"

Events #

NameDescription

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:modelValue

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