Filament•2mo ago

Adding a progress bar to a filament form.

I have a form that performs an import of data that can run for a long time in some circumstances. I've got the backend sorted so it doesn't timeout but occasionally I get a timeout from Cloudflare. To solves this I thought I could add a progress bar that updates as the records are being processed but I can't figure out how to make this work. I started with a custom field that is has a html progress bar in it and linked that to a progress variable in the backend. But I can't seem to get it to update as the records are being processed.

1 Reply

bardolf_6969OP•2mo ago

this is my progress-bar blade

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$getStatePath()}')") }} }">
        <progress max="100" x-bind:value="state" class="w-full" @progressUpdated="$refresh"></progress>
    </div>
</x-dynamic-component>

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$getStatePath()}')") }} }">
        <progress max="100" x-bind:value="state" class="w-full" @progressUpdated="$refresh"></progress>
    </div>
</x-dynamic-component>

Gaming

Programming

Adding a progress bar to a filament form.