Upload
Upload one or more files
<template>
<b-field class="file">
<b-upload v-model="file">
<a class="button is-primary">
<b-icon icon="upload"></b-icon>
<span>Click to upload</span>
</a>
</b-upload>
<span class="file-name" v-if="file">
{{ file.name }}
</span>
</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>
API
Name | Description | Type | Values | Default |
---|---|---|---|---|
v-model | Binding value | File, Array<File> | — | [] |
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 | 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 |
This page is open source. Noticed a typo or something's unclear?