Watch FilePond value for manual changes

Author: rawilk

docs/components/filepond.md

@@ -136,3 +136,12 @@ If you're into using CDNs, you can add these lines to your layout file for the a
 <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
 <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
 ```
+
+## Manually Deleting Files
+
+If you decide to do something like list out the files and delete them yourself manually instead of the revert button provided by FilePond, you will
+find that the files still appear to be in FilePond, even though Livewire has actually cleared out your `wire:model` value. To help with this,
+the `file-pond` component adds a watcher on your `wire:model` by using `@entangle`. Now, when you remove the files manually, the component
+will pick up on those changes and remove the removed files from the FilePond instance.
+
+You can opt out of this behavior by setting the boolean attribute `watch-value` to `false` on the component.

resources/views/components/files/file-pond.blade.php

@@ -1,24 +1,57 @@
 <div wire:ignore
-     x-data
+     x-data="{ pond: null, @if ($shouldWatch($attributes)) value: @entangle($attributes->wire('model')), oldValue: undefined @endif }"
      x-cloak
      x-init="
         {{ $plugins ?? '' }}
-        FilePond.setOptions({
+
+        @if ($shouldWatch($attributes))
+            $watch('value', value => {
+                @if ($multiple)
+                    const removeOldFiles = (newValue, oldValue) => {
+                        if (newValue.length < oldValue.length) {
+                            const difference = oldValue.filter(i => ! newValue.includes(i));
+
+                            difference.forEach(serverId => {
+                                const file = pond.getFiles().find(f => f.serverId === serverId);
+
+                                file && pond.removeFile(file.id);
+                            });
+                        }
+                    };
+
+                    if (this.oldValue !== undefined) {
+                        try {
+                            const files = Array.isArray(value) ? value : JSON.parse(String(value).split('livewire-files:')[1]);
+                            const oldFiles = Array.isArray(this.oldValue) ? this.oldValue : JSON.parse(String(this.oldValue).split('livewire-files:')[1]);
+
+                            if (Array.isArray(files) && Array.isArray(oldFiles)) {
+                                removeOldFiles(files, oldFiles);
+                            }
+                        } catch (e) {}
+                    }
+
+                    this.oldValue = value;
+                @else
+                    ! value && pond.removeFile()
+                @endif
+            });
+        @endif
+
+        pond = FilePond.create($refs.input, {
             {{ $jsonOptions() }}
             {{-- Enhance for livewire support --}}
             @if ($attributes->whereStartsWith('wire:model')->first())
                 server: {
                     process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
-                        @this.upload('{{ $attributes['wire:model'] }}', file, load, error, progress);
+                        @this.upload('{{ $attributes->wire('model')->value() }}', file, load, error, progress);
                     },
                     revert: (filename, load) => {
-                        @this.removeUpload('{{ $attributes['wire:model'] }}', filename, load);
+                        @this.removeUpload('{{ $attributes->wire('model')->value() }}', filename, load);
                     },
                 },
             @endif
             {{ $optionsSlot ?? '' }}
         });
-        FilePond.create($refs.input);
     "
 >
     <input x-ref="input"

src/Components/Files/FilePond.php

@@ -29,6 +29,15 @@ class FilePond extends BladeComponent
     /** @var string|null */
     public $description;
 
+    /**
+     * When set to true, the component will watch for changes to the wire:model
+     * and manually remove the files from the FilePond instance if they are
+     * still present.
+     *
+     * @var bool
+     */
+    public bool $watchValue;
+
     public function __construct(
         bool $multiple = false,
         bool $allowDrop = true,
@@ -38,6 +47,7 @@ public function __construct(
         int $maxFiles = null,
         string $type = null,
         string $description = null,
+        bool $watchValue = true,
         bool $showErrors = true
     ) {
         $this->multiple = $multiple;
@@ -49,6 +59,7 @@ public function __construct(
         $this->options = $options;
         $this->description = $description;
         $this->showErrors = $showErrors;
+        $this->watchValue = $watchValue;
     }
 
     public function options(): array
@@ -83,4 +94,10 @@ public function jsonOptions(): string
 
         return '...' . json_encode((object) $this->options()) . ',';
     }
+
+    public function shouldWatch($attributes): bool
+    {
+        return $this->watchValue
+            && (bool) $attributes->whereStartsWith('wire:model')->first();
+    }
 }