How to display filename for custom input in Vue? - vue.js

Question

I have a styled file input. It works fine, but after the file selection, I would like to show the selected filename instead of No files selected. How can I do this in Vue?
.fileContainer {
overflow: hidden;
position: relative;
background-color: #8181fe;
color: #fff;
padding: 6px 18px;
border-radius: 7px;
line-height: 21px;
}
form input, textarea {
background-color: #fff;
padding: 10px;
border: 1px solid #d9dadc;
border-radius: 7px;
font-size: 16px;
color: #393645;
resize: none;
}
.fileContainer [type=file] {
cursor: pointer;
display: block;
font-size: 13px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
left: 0;
text-align: right;
top: -8px;
}
.file-info {
font-size: 13px;
color: #a9a7a9;
line-height: 53px;
padding-left: 10px;
}
<div id="contact-form" class="contact-form">
<form class="form">
<div class="section-file">
<label class="fileContainer">
Select files
<input type="file" class="file-upload" id="file" name="file" accept="jpg/image/jpeg/image/png">
</label>
<span class="file-info">No files selected</span>
</div>
</form>
</div>

Answer 1

Note the change event's target is the associated <input>, and the selected files are indicated in <input>.files, which has a length property for the number of files. We could then track the non-zero length as a Boolean to determine whether to display No files selected:
Add a files data property to track the selected files:
data() {
return {
files: null
}
},
Use v-if to conditionally render No files selected based on files above. In the v-else branch, we display the list of selected files:
<span v-if="!files || !files.length">No files selected</span>
<ul v-else>
<li v-for="file in files" :key="file.name">{{file.name}}</li>
</ul>
Add a change-event handler to the <input> in the component's template:
<input #change="filesSelected">
Define the handler method in the component's methods:
methods: {
fileSelected(e) {
this.files = e.target.files
}
}
new Vue({
el: '#contact-form',
data() {
return {
files: null
}
},
methods: {
fileSelected(e) {
this.files = e.target.files
}
}
})
.fileContainer {
overflow: hidden;
position: relative;
background-color: #8181fe;
color: #fff;
padding: 6px 18px;
border-radius: 7px;
line-height: 21px;
}
form input, textarea {
background-color: #fff;
padding: 10px;
border: 1px solid #d9dadc;
border-radius: 7px;
font-size: 16px;
color: #393645;
resize: none;
}
.fileContainer [type=file] {
cursor: pointer;
display: block;
font-size: 13px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
left: 0;
text-align: right;
top: -8px;
}
.file-info {
font-size: 13px;
color: #a9a7a9;
line-height: 53px;
padding-left: 10px;
}
<script src="https://unpkg.com/vue#2.6.10/dist/vue.min.js"></script>
<div id="contact-form" class="contact-form">
<form class="form">
<div class="section-file">
<label class="fileContainer">
Select files
<input type="file" class="file-upload" id="file" name="file" #change="fileSelected" multiple accept="image/jpg,image/jpeg,/image/png">
</label>
<span class="file-info" v-if="!files || !files.length">No files selected</span>
<ul v-else>
<li v-for="file in files" :key="file.name">{{file.name}}</li>
</ul>
</div>
</form>
</div>