this.$refs.pond.removeFiles() and this.$refs.pond._pond.removeFiles() don't work

[kazvaggos]

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

Hello team.

While trying to migrate to Vue 3, we noticed that filepond's removeFiles method is not working while in Vue 2 it was working just fine. We are expecting the uploaded files to be removed and the component to be in the initial state, but the files are not removed at all in Vue 3, while in Vue 2 they were removed as expected.

Reproduction

Our implementation is with options api.

<file-pond
      :name="name"
      ref="pond"
      :label-idle="labelIdle"
      allow-multiple="true"
      :server="server"
      :max-files="maxFiles"
      :max-file-size="maxFileSize"
      :accepted-file-types="acceptedFileTypes"
      @processfilerevert="handleFileRevert"
      @removefile="handleFileRemove"
      :fileRenameFunction="fileRenameFunction"
      @init="handleInit"
      :iconRemove="iconRemove"
      :iconRetry="iconRetry"
/>

function reset() {
  this.$refs.pond.removeFiles() // does nothing
  this.$refs.pond._pond.removeFiles() // does nothing
  this.$refs.pond.$el.getElementsByClassName('filepond--action-revert-item-processing)[0]?.click() // doesn't exist
} 

It is like when accessing this.$refs.pond, it is totally another component instance because logging this.$refs.pond.$el input id has different hash from the one rendered in the browser.

Environment

- Device: Dell Inc. XPS 13 9370
- OS: Ubuntu 22.04.1 LTS
- Browser: Version 104.0.5112.101 (Official Build) (64-bit)
- Vue version: 3.2.37
- Filepond:
    "filepond": "4.30.4",
    "filepond-plugin-file-rename": "1.1.8",
    "filepond-plugin-file-validate-size": "2.2.7",
    "filepond-plugin-file-validate-type": "1.2.8",
    "filepond-plugin-image-preview": "4.6.11",
    "vue-filepond": "7.0.3",

[pbowyer]

@kazvaggos Did you find what the cause was? I too am updating from Vue 2 to Vue 3, and in our case this.$refs.pond.processFiles() errors when called with TypeError: processFn is not a function

[oooredooo-bit]

@pbowyer do you have any updates here on how to manually trigger to upload multiple files on a separate button in Vue 3?

[pbowyer]

@oooredooo-bit No I have failed to get this to work 😞

[rikschennink]

Just forked a test repo, see: https://stackblitz.com/edit/github-iaw3um?file=src%2FApp.vue

Line 193.

<file-pond
      ref="pond"
      server="/api"
      accepted-file-types="image/jpeg, image/png"
      allow-multiple="true"
      :imageEditor="myEditor"
      :files="myFiles"
      @init="handleFilePondInit"
/>

    handleFilePondInit: function () {
      console.log('FilePond has initialized');
      // FilePond instance methods are available on `this.$refs.pond`

      // This is for testing purposes
      this.$refs.pond.addFile('index.html').then(() => {
        this.$refs.pond.processFiles();
      });
    },