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

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 >
  <h6>Upload CV:</h6>
  <div >
    <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 >
      <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...

CodePudding user response：

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 >
  <h6>Upload CV:</h6>
  <div >
    <button
      @click="onFileChange"
      type="button"
      id="custom-button"
    >
      <!-- <img src="../../assets/recruit/taicv.svg" alt="" /> -->
      <span > file_upload </span>
      Upload
    </button>

    <input
      id="real-file"
      type="file"
      style="display: none"
      name="image"
      @change="fileName"
    />
    <div >
      <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"
        
        @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>