Skip to content

Upload

Upload one or more files

Examples

Base

Show code

Drag&Drop

Show code

Class props

'Classes applied to the element'

Upload component

Upload one or more files

html
<o-upload></o-upload>

Props

Prop nameDescriptionTypeValuesDefault
acceptSame as native acceptstring-
ariaLabelledbyAccessibility label to establish relationship between the input and control labelstring-Default function (see source code)
disabledSame as native disabledboolean-false
dragDropAccepts drag & drop and change its styleboolean-false
expandedUpload will be expanded (full-width)boolean-false
multipleSame as native, also push new item to v-model instead of replacingboolean-false
nativeReplace last chosen files every time (like native file input element)boolean-true
overrideOverride existing theme classes completelyboolean-
useHtml5ValidationEnable html 5 native validationboolean-
From config:
{
  useHtml5Validation: true
}
v-modelobject | typeof File | object[] | (typeof File)[]-
validationMessageThe message which is shown when a validation error occursstring-
variantColor of the controlstringprimary, info, success, warning, danger, and any other custom color
From config:
upload: {
  variant: undefined
}

Events

Event namePropertiesDescription
update:modelValuevalue Object | Object[] | File | File[] - updated modelValue propmodelValue prop two-way binding
focusevent Event - native eventon input focus event
blurevent Event - native eventon input blur event
invalidevent Event - native eventon input invalid event

Slots

NameDescriptionBindings
defaultDefault contentonclick (event:Event): void - click handler, only needed if a button is used

Sass variables

Current theme ➜ Oruga Base

SASS VariableDefault
$upload-draggable-border1px dashed $grey-light
$upload-draggable-border-radius$base-border-radius
$upload-draggable-disabled-opacity$base-disabled-opacity
$upload-draggable-hover-border-color$grey
$upload-draggable-padding0.25em

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS VariableDefault
$upload-draggable-border1px dashed $grey-light
$upload-draggable-border-radius$base-border-radius
$upload-draggable-disabled-opacity$base-disabled-opacity
$upload-draggable-hover-border-color$grey
$upload-draggable-padding0.25em

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS VariableDefault
$upload-draggable-bgtransparent
$upload-draggable-bg-hovertransparent
$upload-draggable-border-colorvar(--#{$prefix}border-color)
$upload-draggable-border-color-hovervar(--#{$prefix}dark-bg-subtle)
$upload-draggable-border-widthvar(--#{$prefix}border-width)
$upload-draggable-border-radiusvar(--#{$prefix}border-radius)
$upload-draggable-padding2em
$upload-disabled-opacity0.5

See ➜ 📄 Full scss file

Released under the MIT License.