Untitled

@props(['model'])

<div
        wire:ignore
        x-data="{ model: '{{ $model }}' }"
        x-init="
    console.log('Reference for model:', $refs['{{ $model }}']);
    FilePond.registerPlugin(FilePondPluginImagePreview);
    FilePond.setOptions({
        server: {
            process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                @this.upload(model, file, load, error, progress)
            },
            revert: (filename, load) => {
                @this.removeUpload(model, filename, load)
            },
        }
    });
    FilePond.create($refs['{{ $model }}']);  // Notice the unique x-ref per model
    "
>
    <input type="file" x-ref="{{ $model }}">
</div>