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-
customValidityCustom HTML 5 validation error to set on the form controlstring | ((currentValue: object | ObjectConstructor | { new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File; prototype: File; } | (object | ... 1 more ... | { ...; })[], state: ValidityState) => string)-""
disabledSame as native disabledboolean-false
dragDropAccepts drag & drop and change its styleboolean-false
expandedUpload will be expanded (full-width)boolean-false
v-modelThe input value stateobject | File-
multipleSame as native, also push new item to v-model instead of replacingboolean-
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
}
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

SASS VariableDefault
$upload-draggable-border1px dashed var(--#{$prefix}grey-light)
$upload-draggable-border-radiusvar(--#{$prefix}base-border-radius)
$upload-draggable-disabled-opacityvar( --#{$prefix}base-disabled-opacity)
$upload-draggable-hover-border-colorvar(--#{$prefix}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.