FilePond upload error using Validate Size plugin?

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>

score 0 · Answer 1 · answered Nov 17 '20 at 23:12

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);
}

FilePond upload error using Validate Size plugin?

1 Answers1