Filament•16mo ago

How to set state 'is loading' or 'blocked' in modal form

Is it possible to set the 'loading' state of a form in a modal when interacting with a custom field I've created? I've made a custom form field (Livewire component) for uploading large files and I want to disable clicking the 'save' button while it is uploading in the background. Sort of the same state you see when clicking 'save' - with the loading indicator showing on the 'save' button (see attached screenshot). Or maybe not a loading state but blocking the save button while uploading, depending on the possibilities.

7 Replies

Patrick Boivin•16mo ago

Is this in a Panel or in a standalone Form Builder?

jelmerkeijOP•16mo ago

In panel

Patrick Boivin•16mo ago

In the screenshot above, where is the custom Livewire component exactly? Is it wrapping just the last field? (Of upload een...)

jelmerkeijOP•16mo ago

Yes, the form 'field' component 'Of upload een...' and the field below it

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">

    <div
        x-data="{ state: $wire.entangle('{{ $getStatePath() }}') }"
        x-init="document.dispatchEvent(new CustomEvent('initLargeFileUploader'));"
        class="mb-3" id="large-file-upload"
        data-upload-url="{{ $getUploadUrl() }}"
        data-csrf="{{ csrf_token() }}"
    >

        {{-- Input field that has the filename --}}
        <input type="hidden" class="field-file-id" x-model="state" @large-file-upload-completed.window.camel="state = $event.detail.filename">

        <div class="mb-3">
            {{__('labels.current_file')}}: <span class="original-filename font-bold" x-text="state"></span>
        </div>

        <div style="display: none;" class="progress-bar mb-5 h-2 rounded-full bg-gray-200">
            <div class="progress h-2 rounded-full bg-red-500" style="width: 0%"></div>
        </div>
        <div class="status" style="display: none;">
            {{__('labels.states.uploading')}}... (<span class="percentage">0</span>%)
        </div>
        <a class="button-browse-file hover:bg-blue-200 p-2 cursor-pointer opacity-70 filament-button filament-button-size-md inline-flex rounded-lg border transition-colors outline-none">{{  __('labels.actions.or_upload_new_file') }}...</a>


    </div>

</x-dynamic-component>

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">

    <div
        x-data="{ state: $wire.entangle('{{ $getStatePath() }}') }"
        x-init="document.dispatchEvent(new CustomEvent('initLargeFileUploader'));"
        class="mb-3" id="large-file-upload"
        data-upload-url="{{ $getUploadUrl() }}"
        data-csrf="{{ csrf_token() }}"
    >

        {{-- Input field that has the filename --}}
        <input type="hidden" class="field-file-id" x-model="state" @large-file-upload-completed.window.camel="state = $event.detail.filename">

        <div class="mb-3">
            {{__('labels.current_file')}}: <span class="original-filename font-bold" x-text="state"></span>
        </div>

        <div style="display: none;" class="progress-bar mb-5 h-2 rounded-full bg-gray-200">
            <div class="progress h-2 rounded-full bg-red-500" style="width: 0%"></div>
        </div>
        <div class="status" style="display: none;">
            {{__('labels.states.uploading')}}... (<span class="percentage">0</span>%)
        </div>
        <a class="button-browse-file hover:bg-blue-200 p-2 cursor-pointer opacity-70 filament-button filament-button-size-md inline-flex rounded-lg border transition-colors outline-none">{{  __('labels.actions.or_upload_new_file') }}...</a>


    </div>

</x-dynamic-component>

Patrick Boivin•16mo ago

So if the field is in its own Livewire component, I think you'll need to emit an event up to the modal component and the set a disabled attribute on the button. If it's all in the same Livewire component though, you can just set the property directly.

jelmerkeijOP•16mo ago

Ok thanks. Is there any example on how to listen for the event I'll be emitting on a modal? I can't seem to find this in the docs.

Patrick Boivin•16mo ago

Where you emit/listen will depend on the structure of your page but this should give you the general idea: https://livewire.laravel.com/docs/events#listening-for-events

Laravel

Events | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

Gaming

Programming

How to set state 'is loading' or 'blocked' in modal form