To make good looking Vue apps, we need to style our components.
To make our lives easier, we can use components with styles built-in.
In this article, we’ll look at how to add a file input with BootstrapVue.
File Upload
We can add a file upload widget by using the b-form-file component.
For example, we can write:
<template>
<div id="app">
<b-form-file
v-model="file"
:state="Boolean(file)"
placeholder="choose file..."
drop-placeholder="drop file..."
></b-form-file>
<p>{{ file ? file.name : '' }}</p>
</div>
</template>
<script>
export default {
name: "App",
data(){
return {
file: undefined
}
}
};
</script>
The b-form-file component lets us add a file input.
v-model gets the selected file object and binds it to the file property.
state is for setting the validation state.
placeholder is a placeholder displayed for the regular file input.
drop-placeholder is the placeholder displayed when we’re dropping files.
Then we display the file name below it.
We can use the multiple prop to let users add multiple files.
Drop mode is enabled by default.
We can add the no-drop prop to disable dropping files.
Limiting File Types
We can limit the file types that can be uploaded.
To do that, we just have to set the accept prop.
For instance, we can write:
<b-form-file accept="image/jpeg, image/png, image/gif"></b-form-file>
or:
<b-form-file accept=".jpg, .png, .gif"></b-form-file>
We can set the mime type or the file extension of the file.
Sizing
The sizing of the file upload box can also be changed.
The size prop lets us change the size. 'sm' is for small and 'lg' is for large.
Otherwise, we get the default size.
For instance, we can write:
<template>
<div id="app">
<b-form-file v-model="file" :state="Boolean(file)" size="sm"></b-form-file>
<p>{{ file ? file.name : '' }}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
file: undefined
};
}
};
</script>
File Name Formatter
We can format the file name for the selected file the way we like.
To do that, we can create a function.
For instance, we can write:
<template>
<div id="app">
<b-form-file multiple :file-name-formatter="formatNames"></b-form-file>
<p>{{ file ? file.name : '' }}</p>
</div>
</template>
<script>
export default {
name: "App",
methods: {
formatNames(files) {
if (files.length === 1) {
return files[0].name;
} else {
return `${files.length} files chosen`;
}
}
}
};
</script>
The files parameter is an array-like object with the chosen files.
Therefore, we can check the length property and return the string we want to display.
Formatting File Names with Scoped Slots
To display something other than text when files are chosen, we can add items to slots.
To do that, we write:
<template>
<div id="app">
<b-form-file multiple>
<template slot="file-name" slot-scope="{ names }">
<b-badge>chosen file: {{ names[0] }}</b-badge>
<b-badge v-if="names.length > 1" variant="dark" class="ml-1">{{ names.length }} files chosen</b-badge>
</template>
</b-form-file>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We populate the file-name slot with our own content.
The names array lets us access the file names.
Autofocus
We can add the autofocus prop to make the file input focus when it’s loaded or when it’s displayed inside a keep-alive component.
Clearing File Selection
We can clear file selection by setting the file object to null or undefined .
For instance, we can write:
<template>
<div id="app">
<b-form-file v-model="file"></b-form-file>
<b-button @click="file = undefined">Reset file input</b-button>
</div>
</template>
<script>
export default {
data() {
return {
file: undefined
};
}
};
</script>
We just set file to undefined to clear the input.
Also, we can clear it by setting a ref for the file input and then call reset on it.
We can write:
<template>
<div id="app">
<b-form-file v-model="file" ref="file-input" class="mb-2"></b-form-file>
<b-button @click="clearFiles">Reset file input</b-button>
</div>
</template>
<script>
export default {
data() {
return {
file: undefined
};
},
methods: {
clearFiles() {
this.$refs["file-input"].reset();
}
}
};
</script>
This does the same thing as resetting by clearing the model.
Conclusion
BootstrapVue comes with a file input component.
We can do all the things we can think of with it, like dropping files, selecting files, and clearing file selection.
