Filament•12mo ago

How to debug refreshes on submit with file uploads?

I have FileUpload in my form and when submitting the form it refreshes the page. When I remove the file upload from the form, everything works as expected. Anyone have any idea on how to debug that? Cheers

Solution:

Wow! I got it. I'm dumb. Earlier this week I added public/** dir to vite.config.js refresh paths. These uploads go to public/ apparently so Vite is refreshing the page. Nice.

Jump to solution

4 Replies

YaegerOP•12mo ago

This is my component:

<form wire:submit="send">
    {{ $this->form }}

    @if ($sent)
        <x-alert-container title="Bericht is verzonden" type="success" class="my-6">
            We nemen zo snel mogelijk contact met je op.
        </x-alert-container>
    @endif

    <div class="mt-8 flex justify-end">
        <x-primary-button>
            Verstuur
        </x-primary-button>
    </div>
</form>

<form wire:submit="send">
    {{ $this->form }}

    @if ($sent)
        <x-alert-container title="Bericht is verzonden" type="success" class="my-6">
            We nemen zo snel mogelijk contact met je op.
        </x-alert-container>
    @endif

    <div class="mt-8 flex justify-end">
        <x-primary-button>
            Verstuur
        </x-primary-button>
    </div>
</form>

Form is as simple as it can be:

public function form(Form $form): Form
{
    return $form->columns(2)
        ->schema([
            TextInput::make('firstName')->required()->label('Voornaam'),
            FileUpload::make('cv')->required()->columnSpanFull()->label('CV'),
        ])
        ->statePath('data');
}

public function send()
{
    if ($this->sent) {
        return;
    }

    $formData = $this->form->getState();

    // send mail

    $this->sent = true;
}

public function form(Form $form): Form
{
    return $form->columns(2)
        ->schema([
            TextInput::make('firstName')->required()->label('Voornaam'),
            FileUpload::make('cv')->required()->columnSpanFull()->label('CV'),
        ])
        ->statePath('data');
}

public function send()
{
    if ($this->sent) {
        return;
    }

    $formData = $this->form->getState();

    // send mail

    $this->sent = true;
}

YaegerOP•12mo ago

So it does do 1 update

YaegerOP•12mo ago

As you can see it shows the sent = true state for a short time, and then refreshes the page Without the file upload this doesn't happen

Solution

Yaeger•12mo ago

Wow! I got it. I'm dumb. Earlier this week I added public/** dir to vite.config.js refresh paths. These uploads go to public/ apparently so Vite is refreshing the page. Nice.

Gaming

Programming

How to debug refreshes on submit with file uploads?