Upload

The Upload input component uses HTML's native file input. It allows users to select files from their device for upload. In addition to native input features, it adds support for Drag and drop and clearing the input. Use it with the Field component to access all the functionalities.

Examples

Base

Show code

HTML

<section>
    <o-field>
        <o-upload v-slot="{ onclick }" v-model="file">
            <o-button tag="button" variant="primary" @click="onclick">
                <o-icon icon="upload" />
                <span>Click to upload</span>
            </o-button>
        </o-upload>
    </o-field>

    <p><b>Selected:</b> {{ file?.name }}</p>
</section>

JS

import { ref } from "vue";

const file = ref<File>();

Drag&Drop

Enable drag and drop using the drag-drop prop. To allow multiple files to be uploaded, set the multiple prop.

Show code

HTML

<section>
    <o-field>
        <o-upload v-model="dropFiles" multiple drag-drop>
            <div style="text-align: center">
                <p>
                    <o-icon icon="upload" size="is-large" />
                </p>
                <p>Drop your files here or click to upload</p>
            </div>
        </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>

JS

import { ref } from "vue";

const dropFiles = ref<File[]>([]);

function deleteDropFile(index): void {
    dropFiles.value.splice(index, 1);
}

Disabled

Prevent inputs with the disabled prop.

Show code

HTML

<section>
    <o-field>
        <o-upload disabled>
            <o-button tag="button" variant="primary">
                <o-icon icon="upload" />
                <span>Click to upload</span>
            </o-button>
        </o-upload>
    </o-field>

    <o-field>
        <o-upload drag-drop disabled>
            <div style="text-align: center">
                <p>
                    <o-icon icon="upload" size="is-large" />
                </p>
                <p>Drop your files here or click to upload</p>
            </div>
        </o-upload>
    </o-field>
</section>

Variants

Different styles can be achieved with the variant prop.

Show code

HTML

<section>
    <o-field label="Primary">
        <o-upload v-model="file" drag-drop variant="primary" expanded>
            <div style="text-align: center">
                <o-icon icon="upload" /> Hover to see color variant
            </div>
        </o-upload>
    </o-field>

    <o-field label="Secondary">
        <o-upload v-model="file" drag-drop variant="secondary" expanded>
            <div style="text-align: center">
                <o-icon icon="upload" /> Hover to see color variant
            </div>
        </o-upload>
    </o-field>

    <o-field label="Success">
        <o-upload v-model="file" drag-drop variant="success" expanded>
            <div style="text-align: center">
                <o-icon icon="upload" /> Hover to see color variant
            </div>
        </o-upload>
    </o-field>

    <o-field label="Info">
        <o-upload v-model="file" drag-drop variant="info" expanded>
            <div style="text-align: center">
                <o-icon icon="upload" /> Hover to see color variant
            </div>
        </o-upload>
    </o-field>

    <o-field label="Warning">
        <o-upload v-model="file" drag-drop variant="warning" expanded>
            <div style="text-align: center">
                <o-icon icon="upload" /> Hover to see color variant
            </div>
        </o-upload>
    </o-field>

    <o-field label="Danger">
        <o-upload v-model="file" drag-drop variant="danger" expanded>
            <div style="text-align: center">
                <o-icon icon="upload" /> Hover to see color variant
            </div>
        </o-upload>
    </o-field>

    <p><b>Selected:</b> {{ file?.name }}</p>
</section>

JS

import { ref } from "vue";

const file = ref<File>();

Upload component

Upload one or more files.

<o-upload></o-upload>

Props

Prop name	Description	Type	Values	Default
accept	Same as native accept	string	-
customValidity	Custom HTML 5 validation error to set on the form control	string | ((currentValue: object | ObjectConstructor | { new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag ): File; prototype: File; } | (object | ... 1 more ... | { ...; })[] | null | undefined, state: ValidityState) => string) | undefined	-	""
disabled	Same as native disabled	boolean	-	false
dragDrop	Accepts drag & drop and change its style	boolean	-	false
expanded	Upload will be expanded (full-width)	boolean	-	false
v-model	The input value state	File | object	-
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	-	true
override	Override existing theme classes completely	boolean	-
useHtml5Validation	Enable HTML 5 native validation	boolean	-	From config: {   useHtml5Validation: true }
variant	Color of the control	string	primary, info, success, warning, danger, and any other custom color	From config: upload: {   variant: undefined }

Events

Event name	Properties	Description
update:model-value	value object | object[] | File | File[] - updated modelValue prop	modelValue prop two-way binding
focus	event Event - native event	on input focus event
blur	event Event - native event	on input blur event
invalid	event Event - native event	on input invalid event

Slots

Name	Description	Bindings
default	Default content	onclick (event:Event): void - click handler, only needed if a button is used

Class Inspector

Classes applied to the element:

How does the 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.

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.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element.
expandedClass	Class of the root element when expanded.	expanded
disabledClass	Class of the root element when disabled.	disabled
draggableClass	Class of the dragable container element.	dragDrop
hoveredClass	Class of the dragable container element when hovered. 👉 Drag & drop a file to see it in action!	dragDrop
variantClass	Class of the dragable container element with variant. 👉 Drag & drop a file to see it in action!	variant dragDrop	primary info warning danger

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$upload-draggable-border	1px dashed var(--#{$prefix}grey-light)
$upload-draggable-border-radius	var(--#{$prefix}base-border-radius)
$upload-draggable-disabled-opacity	var( --#{$prefix}base-disabled-opacity)
$upload-draggable-hover-border-color	var(--#{$prefix}grey)
$upload-draggable-padding	2em

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS Variable	Default
$upload-bg	transparent
$upload-draggable-padding	2em
$upload-colors	file.$file-colors
$upload-border-color	css.getVar("grey-light")

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS Variable	Default
$upload-draggable-bg	transparent
$upload-draggable-bg-hover	transparent
$upload-draggable-border-color	var(--#{$prefix}border-color)
$upload-draggable-border-color-hover	var(--#{$prefix}dark-bg-subtle)
$upload-draggable-border-width	var(--#{$prefix}border-width)
$upload-draggable-border-radius	var(--#{$prefix}border-radius)
$upload-draggable-padding	2em
$upload-disabled-opacity	0.5

See ➜ 📄 Full scss file