vue-filepond, remove all files in vue3 composition API

Question

i use 'Vue-Filepond' to upload simple file.

to remove all files after file upload, i want access the Filepond object and use 'removeFiles' method.

but cant access filepond object (using ref)

Other examples say to use

this.$ref.pond.removeFiles()

but cannot use 'this.$ref' When using 'script setup'

How should I acess it?

attach a part of the source code.

<FilePond
ref="pond"
instant-upload="false"
label-idle="Drop files here..."
:allow-multiple="false"
:credits="'false'"
allow-revert="false"
accepted-file-types=".java"
@addfile="addFile"
@error="onFilesError"
/>


<script setup lang="ts"> 
   const FilePond = vueFilePond(FilePondPluginFileValidateType); 
   const pond = ref<HTMLDivElement | null>(null); 
   const remove = () => { 
      pond.value.pond.removeFiles() // can't access filepond object
   } 
</script>

Answer 1

Try doing this. I'm also developing a project using filepond. pond.value.removeFiles()

Also if you're using typescript just like I do. Try importing filepond type like this :

import type { FilePond } from 'filepond'

Inside script setup tag:

const FilePondComponent = vueFilePond(FilePondPluginFileValidateType); 
const pond = ref<FilePond | null>(null);

Using filepond component

<file-pond-component/>