How do i click on the label to upload the file and show the file name in Vue 2 - vue.js

Question

Here is my code but it has not been added logic.
I'm trying to click on the label to upload the file instead of using the input tag.
Apply.vue
<div class="line">
<h6>Upload CV:</h6>
<div class="up-cv">
<button #click="onFileChange" type="button" id="custom-button">
<img src="../../assets/recruit/taicv.svg" alt="" />Upload
</button>
<input id="real-file" type="file" style="display: none" name="image" />
<div class="name-cv">
<h5 id="custom-text">you have not selected the file</h5>
<img onclick="deleteFile()" src="../../assets/recruit/delete.svg" alt="" />
</div>
</div>
</div>
Looking forward to your help, thanks a lot...

Answer 1

I have created one Demo as you want on stackblitz.
link - https://vue-j4h4a6.stackblitz.io/
also I have attached source code here
<template>
<div id="app">
<div class="line">
<h6>Upload CV:</h6>
<div class="up-cv">
<button
#click="onFileChange"
type="button"
id="custom-button"
>
<!-- <img src="../../assets/recruit/taicv.svg" alt="" /> -->
<span class="material-symbols-outlined"> file_upload </span>
Upload
</button>
<input
id="real-file"
type="file"
style="display: none"
name="image"
#change="fileName"
/>
<div class="name-cv">
<h5 v-if="uploadedFileName">{{ uploadedFileName }}</h5>
<h5 v-else id="custom-text">you have not selected the file</h5>
<!-- <img
onclick="deleteFile()"
src="../../assets/recruit/delete.svg"
alt=""
/> -->
<span
v-if="uploadedFileName"
class="material-symbols-outlined deleteBtn"
#click="deleteFile"
>
delete
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
uploadedFileName: null,
};
},
methods: {
onFileChange() {
document.getElementById('real-file').click();
},
fileName(e) {
this.uploadedFileName = e.target.value;
},
deleteFile() {
this.uploadedFileName = null;
},
},
};
</script>
<style>
#custom-button {
display: inline-block;
border: 1px solid grey;
padding: 10px;
cursor: pointer;
}
#custom-button span {
display: inline-block;
vertical-align: bottom;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.deleteBtn {
cursor: pointer;
color: red;
}
</style>