Clear out filepone files

#1

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

How to reset Filepond input file?
#2

I just solved this problem by save the obejct

we need to call the filepone instance remove function
https://pqina.nl/filepond/docs/patterns/api/filepond-instance/

FilePond.create($refs.images); filepone remove fucntion isnot exists
from the filepone doc the isntance must be the result of createion of filepone.

so this one will work

//first dispatch browser event from liveware
$this->dispatchBrowserEvent('remove-images');


//second listen it in alpine
x-on:remove-images.window="    Pone.removeFiles();  " 

//notice here this Pone must be the instance of filepone.

x-init="

        //other filepone option here

       //finally filepone instance saved to pone
        Pone = FilePond.create($refs.images);

    "
2 Likes