Upload

Upload one or more files

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 | null>(null);

Drag&Drop

Show code

HTML

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

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>
            <center>
                <p>
                    <o-icon icon="upload" size="is-large" />
                </p>
                <p>Drop your files here or click to upload</p>
            </center>
        </o-upload>
    </o-field>
</section>

Variants

Show code

HTML

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

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

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

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

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

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

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

JS

import { ref } from "vue";

const file = ref<File | null>(null);

Class props

'Classes applied to the element'

Upload component

Upload one or more files

<o-upload></o-upload>

Props

Prop name	Description	Type	Values	Default
accept			-
customValidity			-	""
disabled			-	false
dragDrop			-	false
expanded			-	false
v-model			-
native			-	true
override			-
useHtml5Validation			-	From config: {   useHtml5Validation: true }
variant			-	From config: upload: {   variant: undefined }

Events

Event name	Properties	Description
update:modelValue	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

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	0.25em

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS Variable	Default
$upload-colors	file.$file-colors
$upload-bg	transparent
$upload-draggable-padding	0.5rem
$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