FilePond upload error using Validate Size plugin? - vue.js

Question

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:
TypeError: Cannot read property 'data' of undefined
This happens in my addFile method where I attempt to use the method getFileENcodeDataURL(), so that I can send it along to my GraphQL server. Does anybody have any suggestions for how to fix this?
<template>
<file-pond
ref="filepondUploader"
accepted-file-types="image/jpeg, image/png"
:allow-multiple="false"
:instant-upload="false"
max-file-size="1MB"
name="avatar"
#addfile="addFile"
#removefile="removeFile" />
</template>
<script>
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 & Drop your picture<br/>or <span class="filepond--label-action">Browse</span>',
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(); <--- where error occurs
this.$emit('handle-image-upload', file);
}
}
}
</script>

Answer 1

I found a simple fix for this issue when I was looking through the docs, specifically this part that discusses the methods. In the addFile method, I realized that it passes an event which contains the error if a file is too large. If the file is not too large, the event is null. So I simply do a check, remove the file and return before it gets to the point that it was causing me issues, like so:
addFile (e) {
if (e) {
this.error = e;
this.$refs.filepondUploader.removeFile();
return;
}
const initial = this.$refs.filepondUploader.getFile(0);
const file = initial.getFileEncodeDataURL();
this.$emit('handle-image-upload', file);
}