Upload

Upload one or more files

---

edit on github

Examples

Base

<template>
  <o-field class="file">
    <o-upload v-model="file">
      <o-button tag="a" variant="primary">
        <o-icon icon="upload"></o-icon>
        <span>Click to upload</span>
      </o-button>
    </o-upload>
    <span class="file-name" v-if="file">
      {{ file.name }}
    </span>
  </o-field>
</template>

<script>
  export default {
    data() {
      return {
        file: null
      }
    }
  }
</script>

Drag&Drop

<template>
  <section>
    <o-field>
      <o-upload v-model="dropFiles" multiple drag-drop>
        <section class="ex-center">
          <p>
            <o-icon icon="upload" size="is-large"> </o-icon>
          </p>
          <p>Drop your files here or click to upload</p>
        </section>
      </o-upload>
    </o-field>

    <div class="tags">
      <span v-for="(file, index) in dropFiles" :key="index">
        {{file.name}}
        <o-button icon-left="times" size="small" native-type="button" @click="deleteDropFile(index)"> </o-button>
      </span>
    </div>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        dropFiles: []
      }
    },
    methods: {
      deleteDropFile(index) {
        this.dropFiles.splice(index, 1)
      }
    }
  }
</script>

<style>
  .ex-center {
    text-align: center;
  }
</style>

Class props

📄 Full scss file

Click to upload

How does Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link (▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.
🔍 This icon indicates that you should pay attention to CSS specificity. See "Deal with specificity" section in the documentation.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop. You'll find more info in the "Overriding section".

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
invalid
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