title: Using FileReader API inside a Vue.js component method
body: <p>I am developing a file picker with Vue.js. I want to show selected file previews.
  I use <a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications" rel="nofollow noreferrer">FileReader</a> <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader" rel="nofollow noreferrer">API</a> to achieve this. I read the user selected files as data urls with <code>readAsDataURL</code> method of the <code>FileReader</code> object.</p>
  
  <p>However I get an error message saying <code>reader.onload</code> is not a function like:</p>
  
  <pre><code>Uncaught TypeError: reader.onload is not a function
      at VueComponent.handleFileChanges
  </code></pre>
  
  <p>It may be the reader is not defined, following the FileReader undefined error I have mentioned above.</p>
  
  <p>How I try to do do this is as follows:</p>
  
  <pre><code>handleFileChanges (e) {
      var reader = new window.FileReader() // if window is not used it says File READER is not defined
                  reader.onload(function (event) {
                    // dispatch fileAttached to state UI postEditor with event.target.result as read dataURL
                    let imageDataURL = event.target.result
                    this.$store.dispatch('attachedFile', imageDataURL) // or previewFile
                  })
                  reader.readAsDataURL(e.target.files[i])
  }
  </code></pre>
  
  <p>What is the point I am missing?</p>