daikazu Comments - Answer Overflow

daikazu

•Created by daikazu on 12/19/2024 in #❓┊help

FileUpload Component is reloading after the first upload

And then I just created a Livewire component to handle the Form content and it now work like a charm!

# app/Livewire/CustomerMessageForm.php

class CustomerMessageForm extends Component implements HasForms
{
    use InteractsWithForms;

    #[Locked]
    public ?string $email = null;

    #[Locked]
    public ?string $orderNumber = null;
    public mixed $extraData = null;

    /**
     * @var array<string, mixed>
     */
    public ?array $data = [];

    public function mount(string $email, string $orderNumber, mixed $extraData = null): void
    {

        $this->email = $email;
        $this->orderNumber = $orderNumber;
        $this->extraData = $extraData;

        $this->form->fill();

    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Textarea::make('message')
                    ->required()
                    ->rows(5),

                FileUpload::make('attachments')
                    ->disk('s3')
                    ->multiple()
                    //..
            ])
            ->statePath('data');
    }

    #[On('send-customer-message')]
    public function submit(): void
    {
        $data = $this->form->getState();

        $isMessageSent = SendCustomerServiceMessage::run(
            email: $this->email,
            orderNumber: $this->orderNumber,
            data: $data
        );

        if ($isMessageSent) {
            $this->form->fill();
            $this->dispatch('close-modal', id: 'send-message-form');
            Notification::make()
                ->title('Message Sent!')
                ->success()
                ->send();
        } else {
            Notification::make()
                ->title('Failed to send message, Please try again later')
                ->danger()
                ->send();
        }
    }
}

# app/Livewire/CustomerMessageForm.php

class CustomerMessageForm extends Component implements HasForms
{
    use InteractsWithForms;

    #[Locked]
    public ?string $email = null;

    #[Locked]
    public ?string $orderNumber = null;
    public mixed $extraData = null;

    /**
     * @var array<string, mixed>
     */
    public ?array $data = [];

    public function mount(string $email, string $orderNumber, mixed $extraData = null): void
    {

        $this->email = $email;
        $this->orderNumber = $orderNumber;
        $this->extraData = $extraData;

        $this->form->fill();

    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Textarea::make('message')
                    ->required()
                    ->rows(5),

                FileUpload::make('attachments')
                    ->disk('s3')
                    ->multiple()
                    //..
            ])
            ->statePath('data');
    }

    #[On('send-customer-message')]
    public function submit(): void
    {
        $data = $this->form->getState();

        $isMessageSent = SendCustomerServiceMessage::run(
            email: $this->email,
            orderNumber: $this->orderNumber,
            data: $data
        );

        if ($isMessageSent) {
            $this->form->fill();
            $this->dispatch('close-modal', id: 'send-message-form');
            Notification::make()
                ->title('Message Sent!')
                ->success()
                ->send();
        } else {
            Notification::make()
                ->title('Failed to send message, Please try again later')
                ->danger()
                ->send();
        }
    }
}

resources/views/livewire/customer-message-form.blade.php

<div>
  <form wire:submit="create">
      {{ $this->form }}
  </form>
</div>

<div>
  <form wire:submit="create">
      {{ $this->form }}
  </form>
</div>

7 replies

FFilament

•Created by daikazu on 12/19/2024 in #❓┊help

FileUpload Component is reloading after the first upload

For those who stumble upon this thread, the problem I think is related to the same problem which causes actions to perform an additional query of the data when triggered. The solution I came up with was to just create my own custom view action and modal. Some solutions talk about reaching for things like wire-elements/modal but this can just as easily be done using FilamentPHPs built in modal views. I first start by creating a custom view for my modal and added it to my Resource's section header action:

ComponentActionAlias::make('Message')
    ->label('Message')
    ->view('filament.modals.customer-message'),

ComponentActionAlias::make('Message')
    ->label('Message')
    ->view('filament.modals.customer-message'),

customer-message.blade.php

<x-filament::modal id="send-message-form" width="4xl" :close-by-clicking-away="false" :close-by-escaping="true">
    <x-slot name="trigger">
        <x-filament::button icon="heroicon-s-chat-bubble-bottom-center-text" label="Message">
            Message
        </x-filament::button>
    </x-slot>

    <x-slot name="heading">Send Us A Message</x-slot>
    <x-slot name="description">Send us a message or files regarding this order.</x-slot>

    <livewire:customer-message-form
        :email="$getRecord()->website->Email_Address__c"
        :order-number="$getRecord()->Name"
    />

    <x-slot name="footer">
        <x-slot name="footerActions">
            <x-filament::button
                icon="heroicon-s-paper-airplane"
                color="success"
                label="Send"
                x-on:click="$dispatch('send-customer-message')"
            >
                Send
            </x-filament::button>

            <x-filament::button
                icon="heroicon-s-no-symbol"
                color="danger"
                label="Cancel"
                x-on:click="$dispatch('close-modal', { id: 'send-message-form' })"
            >
                Cancel
            </x-filament::button>
        </x-slot>
    </x-slot>
</x-filament::modal>

<x-filament::modal id="send-message-form" width="4xl" :close-by-clicking-away="false" :close-by-escaping="true">
    <x-slot name="trigger">
        <x-filament::button icon="heroicon-s-chat-bubble-bottom-center-text" label="Message">
            Message
        </x-filament::button>
    </x-slot>

    <x-slot name="heading">Send Us A Message</x-slot>
    <x-slot name="description">Send us a message or files regarding this order.</x-slot>

    <livewire:customer-message-form
        :email="$getRecord()->website->Email_Address__c"
        :order-number="$getRecord()->Name"
    />

    <x-slot name="footer">
        <x-slot name="footerActions">
            <x-filament::button
                icon="heroicon-s-paper-airplane"
                color="success"
                label="Send"
                x-on:click="$dispatch('send-customer-message')"
            >
                Send
            </x-filament::button>

            <x-filament::button
                icon="heroicon-s-no-symbol"
                color="danger"
                label="Cancel"
                x-on:click="$dispatch('close-modal', { id: 'send-message-form' })"
            >
                Cancel
            </x-filament::button>
        </x-slot>
    </x-slot>
</x-filament::modal>

7 replies

FFilament

•Created by daikazu on 12/19/2024 in #❓┊help

FileUpload Component is reloading after the first upload

I did try filling the form and I still have the same results. I've tried this on both local and S3 disks. Here is a Gist of the entire resource class. Line 764 is the is the file upload field. https://gist.github.com/daikazu/f37babd13eaaecbcd941d98c9c15a95e

7 replies

FFilament

•Created by binaryfire on 4/6/2024 in #❓┊help

Refresh page on broadcast event

bump

5 replies

FFilament

•Created by christmex on 9/23/2023 in #❓┊help

Global Scope Doesn't Work In Table Builder

Any luck with this? I just ran across a similar problem.

6 replies

Gaming

Programming