Question

[informatter]

Is there an existing issue for this?

• [X] I have searched the existing issues

Have you updated Vue FilePond, FilePond, and all plugins?

• [X] I have updated FilePond and its plugins

Describe the bug

Hi guys, I think this is more of a question rather than a bug. I could not change the label to something different like discussion, for example.

Today was my first attempt at incorporating filepond but I can't see why only 2 files of the ones to upload are passed to the process function of the server object. In the example below myFiles is a property which gets populated by the parent component. In addition the handleProcessFile event handler never gets called. So I think I am missing something important to get this to work.

I am using vue-filepond v6 as I am using Vue 2

I chose to have my own method for process because I already have the code to handle the upload for me, hitting my own API endpoints as well as an integration with S3, etc... so I needed more granular control, as suggested in the advanced section in https://pqina.nl/filepond/docs/api/server/

Below is a minimum reproducible example

Any pointers would be very helpful.

Thank you,

Nicholas

Reproduction

<template>
  <div style="width: 100%">
    <file-pond
        name="test"
        ref="pond"
        :files="myFiles"
        :allow-multiple="true"
        :server="server"
        instantUpload="true"
        maxParallelUploads="2"
        @init="handleFilePondInit"
        :maxFiles="myFiles.length"
        @processfile="handleProcessFile"

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

function handleFilePondInit(){

  this.server = {
    process: async function (fieldName, file, metadata, load, error, progress, abort){

      console.log(file); // only get logged twice !

      return {
        abort: () => {
            // User tapped abort, cancel our ongoing actions here

            // Let FilePond know the request has been cancelled
            abort();
        }
      }

    },
    revert:null,
    restore:null,
    load:null,
    fetch:null
  }

  console.log('FilePond has initialized');

}

export default {
  name: "DataProcessingNewProjectStep3",
  components: {
    FilePond
  },
  props: {
    myFiles: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {

      server: null
    };
  },

  methods: {

    handleFilePondInit,
    handleProcessFile(error, file) {
      console.log(error);
      console.log(file);
    },

  },
};
</script>

Environment

- Device: MacBook Air (M1, 2020)
- OS: macOS Monterrey 12.6
- Browser: Chrome 107.0.5304.87 (Official Build) (arm64)
- Vue version:2.6.14

[rikschennink]

You't note calling load in the process function so FilePond doesn't know the upload has completed and as there's a max of 2 parallel uploads it'll halt after "uploading" two files.

[informatter]

@rikschennink thank you that worked as expected!