Filepond.vue

<template>
  <div>

    <FilePond
      v-bind:max-files="4"
      v-bind:allow-multiple="true"
      v-bind:accepted-file-types="allowedFiletypes"
      v-bind:server="server.process"
      v-bind:files="files"
      v-on:init="handleFilePondInit"
    />

  </div>
</template>

<script>
// Import Vue FilePond
import vueFilePond from 'vue-filepond';

// Import FilePond styles
import 'filepond/dist/filepond.min.css';

// Import FilePond plugins
// Please note that you need to install these plugins separately

// Import image preview plugin styles
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';

// Import image preview and file type validation plugins
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';

// Create component
const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview);

export default {
  name: 'file-pond-upload',
  components: {
    FilePond,
  },
  data: function() {
    return {
      files: [],
      allowMultiple: true,
      allowFileTypeValidation: true,
      allowedFiletypes: 'pdf',
      fileValidateTypeLabelExpectedTypesMap: {
        'application/pdf': '.pdf',
      },
      server: {
        process: {
          url: 'http://0.0.0.0:8990/auth/v1/hug/organisations/adidas/benefit/2a0280a5-2b1f-4d28-b6f7-561395688b07/upload-infopack/',
          method: 'POST',
          withCredentials: false,
          headers: {},
          timeout: 7000,
          onload: null,
          onerror: null,
          ondata: null
        }
      }
    };
  },
  methods: {
    handleFilePondInit: function() {
      this.$refs.pond.getFiles();
    }
  },
};
</script>