55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<div class="custom-file">
|
||
|
|
<input type="file"
|
||
|
|
class="custom-file-input"
|
||
|
|
id="customFileLang"
|
||
|
|
lang="en"
|
||
|
|
v-bind="$attrs"
|
||
|
|
v-on="listeners"
|
||
|
|
/>
|
||
|
|
<label class="custom-file-label" for="customFileLang">
|
||
|
|
{{label}}
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'file-input',
|
||
|
|
inheritAttrs: false,
|
||
|
|
props: {
|
||
|
|
initialLabel: {
|
||
|
|
type: String,
|
||
|
|
default: 'Select file'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
files: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
listeners() {
|
||
|
|
return {
|
||
|
|
...this.$listeners,
|
||
|
|
change: this.fileChange
|
||
|
|
}
|
||
|
|
},
|
||
|
|
label() {
|
||
|
|
let fileNames = [];
|
||
|
|
for (let file of this.files) {
|
||
|
|
fileNames.push(file.name)
|
||
|
|
}
|
||
|
|
return fileNames.length ? fileNames.join(', ') : this.initialLabel
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
fileChange(evt) {
|
||
|
|
this.files = evt.target.files
|
||
|
|
this.$emit('change', this.files)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
</style>
|