Need help with Vue or Nuxt? We build fast apps, custom UI libraries, and help you move to Vue 3 and Nuxt 3 — start with a free 2-week trial.
Talk to an Engineer

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
#

Use the disabled prop to disable any actions with a component

Example
Example
Example
Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
ariaRemoveFileLabel

The aria-label of the "remove file" button

String

"$t:removeFile"

color

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

String

"primary"

deletedFileMessage

Deleted file message

String

"$t:fileDeleted"

disabled

Applies disabled style and removes all user interaction effects.

Boolean

false

dropzone

Enables Drag&Drop

Boolean

false

dropZoneText

Custom drop zone label text

String

"$t:dropzone"

file

Object

null

fileIncorrectMessage

String

"$t:fileTypeIncorrect"

files

Files to be uploaded

Array

null

fileTypes

Specify supported file formats

String

""

hideFileList

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

Boolean

false

modelValue

The value of the v-model bindings.

Object | Array

[]

preset

Named preset combination of component props.

String | Array

-

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

undoButtonText

Cancel button text

String

"$t:undo"

undoDuration

Undoing action duration

String | Number

3000

uploadButtonText

Custom upload button text

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 and must be listed after the 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