Save instantly on upload files using Livewire and Filepond

#1

Is it possible for livewire to handle instant saving right after filepond has finished all uploads?

Currently I have an $images var that stores all upload images and by submitting the form I am able to save the images from livewire-temp directory to my database and my public folder.

What I want to achieve is to save instantly the images without having to submit the form. I worked on that a bit but it’s not working properly. For one image it’s working fine. For more than one images is not working properly as it sometimes stores fewer than the ones that I select i.e. I select 3, filepond shows 3 images to upload, finally only 2 of them are uploaded.

I am suspecting that my method updatedImages that I am using to store the images is been executing before all of the images from the client have been stored to server under livewire-temp directory. If so, is there a way to say to livewire to execute the updatedImages method only after all images have been uploaded to the server?

#2

The problem was that I was dispatching an event that was interrupting the upload process between filepond and livewire. After removing the event

$this->dispatchBrowserEvent('pondReset');

all images where uploaded directly. To handle the reset of filepond I used the below code.

var Pond = FilePond.create( $refs.input );
this.addEventListener('FilePond:processfile', e => {
    setTimeout(function(){
        Pond.removeFile(e.detail.file.id);
    }, 1000);
});