# Upload

Upload one or more files


edit on github

# Examples

# Base

# Drag&Drop

# Class props

📄 Full scss file


How does Class props inspector work?
Class prop Description Props Suffixes
disabledClass Upload class when disabled. disabled
draggableClass Upload class when draggable. dragDrop
expandedClass Upload class when expanded. expanded
hoveredClass Upload class on dragging.
👉 Drag & drop a file to see it in action!
dragDrop
rootClass Root class of the element.
variantClass Class of the upload variant.
👉 Drag & drop a file to see it in action!
variant
dragDrop
primary
info
warning
danger


# Props

Prop name Description Type Values Default
accept Same as native accept string -
autocomplete Native options to use in HTML5 validation string -
disabled Same as native disabled boolean -
dragDrop Accepts drag & drop and change its style boolean -
expanded Upload will be expanded (full-width) boolean - false
icon Icon name to be added string -
iconPack Icon pack to use string mdi, fa, fas and any other custom icon pack
maxlength Same as native maxlength, plus character counter number|string -
multiple Same as native, also push new item to v-model instead of replacing boolean -
native Replace last chosen files every time (like native file input element) boolean - false
override Override classes boolean - false
rounded Makes the element rounded boolean -
statusIcon Show status icon using field and variant prop boolean -
From config

{
   "statusIcon": true
}
useHtml5Validation Enable html 5 native validation boolean -
From config

{
   "useHtml5Validation": true
}
v-model object|File|array -
validationMessage The message which is shown when a validation error occurs string -
variant Color of the control, optional string primary, info, success, warning, danger, and any other custom color

# Events

Event name Properties Description
blur
focus
input

# Slots

Name Description Bindings
default

# Style

CSS Variable SASS Variable Default
--oruga-upload-draggable-border $upload-draggable-border 1px dashed $grey-light
--oruga-upload-draggable-border-radius $upload-draggable-border-radius $base-border-radius
--oruga-upload-draggable-disabled-opacity $upload-draggable-disabled-opacity $base-disabled-opacity
--oruga-upload-draggable-hover-border-color $upload-draggable-hover-border-color $grey
--oruga-upload-draggable-padding $upload-draggable-padding 0.25em