FilePond field does not seem to be removing the files on error

[pktharindu]

Laravel Form Components Version

v6.0.0

Laravel Version

v8.62.0

Alpine Version

v3.3.5

Bug description

First of all, thank you so much for this amazing package! 👌🏻💯

I'm using the FilePond field with Livewire with pretty much the same code from the demo which fires the browser event file-pond-clear if there was a validation error. However, the file is still there and I have to manually remove it before trying another file.

How can I get it removed if there is an error?

Steps to reproduce

No response

Relevant log output

No response

[rawilk]

This may be a possible bug and I'll have to look into it more when I get the chance to.

[andrecuellar]

@pktharindu I had the same problem, apparently the condition is wrong in resources/views/vendor/form-components/components/files/file-pond.blade.php I had to create a new listener called file-validation-single-file-error (or whatever you want) which will be executed (in my case) only when a specific file fails, so I don't need such conditions

I just added

     x-on:file-validation-single-file-error.window="
         pond.removeFiles();
         "

right before

     x-on:file-pond-clear.window="
         if (! this.wireId || $event.detail.id !== this.wireId) {
             return;
         }

         @if ($multiple)
            pond.getFiles().forEach(file => pond.removeFile(file.id));
         @else
            pond.removeFile();
         @endif
     "

and in LiveWire I replaced the old browserEvent to

$this->dispatchBrowserEvent('file-validation-single-file-error', ['id' => $this->id]);

NOTE: apparently pond.removeFiles(); removes all files, so it would not be necessary to do a forEach and then remove the files one by one as the original listener does I haven't tested it with multiple files, but I might test it later.

[rawilk]

I've released v8 of this package, which has slightly tweaked how filepond handles when files should be removed. It won't detect if there are validation errors however, so you'll need to clear filepond out manually if that's the desired effect. In v8 in a livewire component, you can clear it out like this:

$this->emitSelf('file-pond-clear');