How to reset Filepond input file?

#1

Hey there, I have a list of items. When clicking on each item, I’m opening a modal that shows a Filepond input to upload its corresponding image.
The first upload works fine. However, when I click on the next item, the Filepond element will keep showing the previous uploaded image, I’d like to ‘reset’ it.

I’m creating the FilePond object like this:
FilePond.registerPlugin(FilePondPluginImagePreview);
FilePond.setOptions(…);
filePondObj = FilePond.create(this.$refs.input);

After storing the image on the server, I tried calling these methods:
filePondObj.removeFile();
filePondObj.destroy();

But the image still persists in the Filepond input…
It’s weird because if I call filePondObj.getFiles() it returns an empty array.
So I’m not really sure why the image is still there.

Would appreciate any input.

Clear out filepone files
#2

I am initialising filepond through alpinejs. My object is called “pond”. I add an event listener as shown:

this.addEventListener('pondReset', e => {
    pond.removeFiles();
});

When I save the images in my Livewire component, I then despatch this event:

$this->dispatchBrowserEvent('pondReset');

This then clears the uploaded and saved files from the filepond component.

4 Likes
#3

HI looks like your solution is correct but how its not working in my case .

#4

I saw your other thread at Clear out filepone files. You are doing the same thing just you are adding the Event Listener in a different way. All good :slight_smile:

1 Like
#5

Thanks for the input.
Not sure if I missed something else, but adding the ‘var’ keyword made it work. :expressionless:

var filePondObj = FilePond.create(this.$refs.input);

window.addEventListener('pondReset', e => {
  filePondObj.removeFiles();
});
1 Like