<template>
    <div>
      <v-text-field
        :label="label"
        @click="clickInputTag"
        v-model="fileName"
        append-icon="attach_file"
      ></v-text-field>
      <input
        type="file"
        style="display: none"
        :id="id"
        :ref="reference"
        accept="image/*"
        @change="convertToBase64()"
      />
    </div>
  </template> 
      <script >
  export default {
    props: ["label", "reference", "id", "trigger"],
    data() {
      return {
        fileToLoad: "",
        fileName: "",
        fileInBase64: ""
      };
    },
    methods: {
      clickInputTag() {
        this.$refs[this.reference].click();
      },
      convertToBase64(e) {
        //Read File
        var selectedFile = document.getElementById(this.id).files;
        //Check File is not Empty
  
        if (selectedFile.length > 0) {
          // Select the very first file from list
          this.fileToLoad = selectedFile[0];
          this.fileName = selectedFile[0].name;
          // FileReader function for read the file.
          var fileReader = new FileReader();
          // Onload of file read the file content
          let vm = this;
          fileReader.onload = function(fileLoadedEvent) {
            vm.fileInBase64 = fileLoadedEvent.target.result;
            // Print data in console
            console.log(vm.fileInBase64);
  
            var str = vm.fileInBase64;
            const [baseUrl, requiredUrl] = str.split(/,/);
            console.log("required - ", requiredUrl);
  
            let fileData = {
              fileName: this.fileName,
              fileInBase64: requiredUrl
            };
            vm.$emit("fileSelected", fileData);
          };
  
          // Convert data to base64
          fileReader.readAsDataURL(this.fileToLoad);
        }
      },
      resetInput(params) {
        // RESET INPUT ELEMENT,fileName and selectedfile array
        console.log("reference is - ", this.reference);
        this.$refs[this.reference].type = "text";
        this.$refs[this.reference].type = "file";
        this.fileName = "";
        this.fileToLoad;
        this.fileInBase64 = null;
        let fileData = {
          fileName: this.fileName,
          fileInBase64: this.fileInBase64
        };
        vm.$emit("fileSelected", fileData);
      }
    },
    beforeDestroy() {
      this.resetInput();

    }

    // computed: {
    //   respondToTrigger() {
    //     this.respondToTrigger = this.trigger;
    //     if ((this.respondToTrigger = "reset")) {
    //       this.resetInput;
    //     }
    //   }
    // }

  };
  </script> 
      <style scoped >
  </style>