Upload
Upload one or more files
<template>
<b-field class="file is-primary" :class="{'has-name': !!file}">
<b-upload v-model="file" class="file-label">
<span class="file-cta">
<b-icon class="file-icon" icon="upload"></b-icon>
<span class="file-label">Click to upload</span>
</span>
<span class="file-name" v-if="file">
{{ file.name }}
</span>
</b-upload>
</b-field>
</template>
<script>
export default {
data() {
return {
file: null
}
}
}
</script>
# Drag and drop
<template>
<section>
<b-field>
<b-upload v-model="dropFiles"
multiple
drag-drop>
<section class="section">
<div class="content has-text-centered">
<p>
<b-icon
icon="upload"
size="is-large">
</b-icon>
</p>
<p>Drop your files here or click to upload</p>
</div>
</section>
</b-upload>
</b-field>
<div class="tags">
<span v-for="(file, index) in dropFiles"
:key="index"
class="tag is-primary" >
{{file.name}}
<button class="delete is-small"
type="button"
@click="deleteDropFile(index)">
</button>
</span>
</div>
</section>
</template>
<script>
export default {
data() {
return {
dropFiles: []
}
},
methods: {
deleteDropFile(index) {
this.dropFiles.splice(index, 1)
}
}
}
</script>
# Expanded
<template>
<section>
<b-field class="file">
<b-upload v-model="file" expanded>
<a class="button is-primary is-fullwidth">
<b-icon icon="upload"></b-icon>
<span>{{ file.name || "Click to upload"}}</span>
</a>
</b-upload>
</b-field>
<b-field>
<b-upload v-model="dropFiles" multiple drag-drop expanded>
<section class="section">
<div class="content has-text-centered">
<p>
<b-icon icon="upload" size="is-large"></b-icon>
</p>
<p>Drop your files here or click to upload</p>
</div>
</section>
</b-upload>
</b-field>
<div class="tags">
<span v-for="(file, index) in dropFiles" :key="index" class="tag is-primary">
{{file.name}}
<button class="delete is-small" type="button" @click="deleteDropFile(index)"></button>
</span>
</div>
</section>
</template>
<script>
export default {
data() {
return {
file: {},
dropFiles: []
};
},
methods: {
deleteDropFile(index) {
this.dropFiles.splice(index, 1);
}
}
};
</script>
# Rounded
<template>
<section>
<b-field label="Included filename">
<b-field class="file is-primary" :class="{'has-name': !!file}">
<b-upload v-model="file" class="file-label" rounded>
<span class="file-cta">
<b-icon icon="upload"></b-icon>
<span class="file-label">{{ file.name || "Click to upload"}}</span>
</span>
</b-upload>
</b-field>
</b-field>
<b-field label="Separated filename">
<b-field class="file is-primary" :class="{'has-name': !!file2}">
<b-upload v-model="file2" class="file-label" rounded>
<span class="file-cta">
<b-icon class="file-icon" icon="upload"></b-icon>
<span class="file-label">Click to upload</span>
</span>
<span class="file-name" v-if="file2">
{{ file2.name }}
</span>
</b-upload>
</b-field>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
file: {},
file2 : null
};
},
};
</script>
# API
Name | Description | Type | Values | Default |
|---|---|---|---|---|
v-model | Binding value | File, Array | — | [] |
drag-drop | Accepts drag & drop and change its style | Boolean | — | false |
type | Type (color) of the drag area when hovered | String | is-white, is-black, is-light,
is-dark, is-primary, is-info, is-success,
is-warning, is-danger,
and any other colors you've set in the $colors list on Sass | is-primary |
disabled | Same as native disabled | Boolean | — | false |
name | Same as native name | String | — | - |
required | Same as native required | Boolean | — | false |
accept | Same as native accept | String | — | - |
loading | Add the loading state to the drag & drop area | Boolean | — | false |
multiple | Same as native, also push new item to v-model instead of replacing | Boolean | — | false |
native | Replace last chosen files every time (like native file input element) | Boolean | — | false |
expanded | Upload will be expanded (full-width) | Boolean | — | false |
rounded | Upload will be rounded | Boolean | — | false |
This page is open source. Noticed a typo or something's unclear?