I have a integrate filepone through alpine and livewire after succesfully store images in livewire component I want to clear out filepone input images list.
my coe is below
<div
wire:ignore
x-data={}
x-on:remove-images.window=" FilePond.removeFiles(); " //this one not working
x-init="
FilePond.setOptions({
allowMultiple: true ,
server: {
process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
@this.upload('{{ $attributes['wire:model'] }}', file, load, error, progress)
},
revert: (filename, load) => {
@this.removeUpload('{{ $attributes['wire:model'] }}', filename, load)
},
},
});
FilePond.create($refs.images);
"
>
<input type="file" x-ref="images">
<script>//below not working
this.addEventListener('remove-images', e => {
FilePond.removeFiles();
});
</script>
</div>
adter store images I dispatch browser event from livewire
$this->dispatchBrowserEvent('remove-images');
then listen in alpine ,
but I get 3:802 Uncaught TypeError: FilePond.removeFiles is not a function
this one should be the correct answer
I could not get it to work, look like I cant get the filepone instance or some reason please help me thanks thanks