title: Convert file to base64 and add v-model binding in Vuejs
body: <p>I am building a component which has file input fields and being rendered through function in <code>VueJs</code>:</p>
  
  <pre><code>export default {
      name: 'nits-file-input',
      props: {
          label: String,
      },
      render (createElement) {
          return createElement('div', { class: 'form-group m-form__group'}, [
              createElement('label', this.label),
              createElement('div'),
              createElement('div', { class: 'custom-file'},[
                  createElement('input', {
                      class: 'custom-file-input',
                      attrs: { type: 'file' },
                      domProps: {
                          value: self.value
                      },
                      on: {
                          input: (event) =&gt; {
                              var reader = new FileReader()
                              reader.readAsDataURL(event.target.value)
                              reader.onload = function () {
                                  console.log(reader.result);
                              };
                              this.$emit('input', event.target.value)
                          }
                      }
                  }),
                  createElement('label', { class: 'custom-file-label'}, 'Choose File')
              ])
          ])
      }
  }
  </code></pre>
  
  <p>While having the values in v-model I get the path of file but I need to have a <code>base64</code> element. currently in my console I'm getting following error:</p>
  
  <blockquote>
    <p>Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/TMiV4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TMiV4.png" alt="file upload error"></a></p>
  
  <p>Help me out in execution. Thanks</p>