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

Drag&Drop

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

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

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

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

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