title: FilePond upload error using Validate Size plugin?
body: <p>I'm using the Vue-FilePond library to upload user avatars, and am trying to implement a max-file-size. For testing purposes, I've set it to 1MB. When I try uploading anything larger than 1MB, I receive an error:</p>
  <p><code>TypeError: Cannot read property 'data' of undefined</code></p>
  <p>This happens in my <code>addFile</code> method where I attempt to use the method <code>getFileENcodeDataURL()</code>, so that I can send it along to my GraphQL server. Does anybody have any suggestions for how to fix this?</p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;file-pond
      ref=&quot;filepondUploader&quot;
      accepted-file-types=&quot;image/jpeg, image/png&quot;
      :allow-multiple=&quot;false&quot;
      :instant-upload=&quot;false&quot;
      max-file-size=&quot;1MB&quot;
      name=&quot;avatar&quot;
      @addfile=&quot;addFile&quot;
      @removefile=&quot;removeFile&quot; /&gt;
  &lt;/template&gt;
      
  &lt;script&gt;
    import vueFilePond, { setOptions } from 'vue-filepond';
    import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
    import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
    import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
    import FilePondPluginFileEncode from 'filepond-plugin-file-encode';
    import 'filepond/dist/filepond.min.css';
    import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
  
    const FilePond = vueFilePond(
      FilePondPluginFileValidateType,
      FilePondPluginFileValidateSize,
      FilePondPluginImagePreview,
      FilePondPluginFileEncode
    );
  
    setOptions({
      labelIdle: 'Drag &amp; Drop your picture&lt;br/&gt;or &lt;span class=&quot;filepond--label-action&quot;&gt;Browse&lt;/span&gt;',
      imagePreviewHeight: 170,
      imageCropAspectRatio: '1:1',
      imageResizeTargetWidth: 200,
      imageResizeTargetHeight: 200,
      stylePanelLayout: 'compact circle',
      styleLoadIndicatorPosition: 'center bottom',
      styleButtonRemoveItemPosition: 'center bottom'
    });
  
    export default {
      methods: {
        addFile () {
          const initial = this.$refs.filepondUploader.getFile(0);
          const file = initial.getFileEncodeDataURL(); &lt;--- where error occurs
          this.$emit('handle-image-upload', file);
        }
      }
    }
  &lt;/script&gt;
  </code></pre>