Livewire 3 File Upload Causes Page Refresh After Select a File

Hi everyone,

I'm using Livewire 3 with WithFileUploads to handle file uploads in my form. However, after selecting a file, the page refreshes unexpectedly, causing some input scripts (like date pickers) to not work correctly.

My Setup

I'm using Laravel Volt with Livewire 3 and WithFileUploads. Below is my component setup:

Livewire Component

use Livewire\Attributes\Layout;
use Livewire\WithFileUploads;
use Livewire\Volt\Component;
use Illuminate\Support\Facades\Auth;

new #[Layout('components.layouts.app')] class extends Component {
    use WithFileUploads;

    public $form = [
        'activity_type_id' => '',
        'date' => '',
        'activities' => [
            [
                'activity' => '',
                'output' => '',
                'volume' => '',
                'unit' => '',
                'note' => '',
                'location' => true,
                'proof' => null,
            ]
        ]
    ];

    public function save()
    {
        $this->validate([
            'form.activities.*.proof' => 'nullable|file|max:10240',
        ]);

        session()->flash('success', 'Activities created successfully.');
        return redirect()->route('activity');
    }
};

<input 
    type="file"
    wire:model="form.activities.{{ $index }}.proof"
    class="input w-full"
    id="proof-{{ $index }}"
/>

Issue

After selecting a file, the page refreshes unexpectedly.
This causes some scripts (like date pickers) to not work properly.

What I've Tried

Adding enctype="multipart/form-data" to the form ✅ (No effect).
Debugging with logger() in hydrate() and dehydrate() ✅ (No useful insight).

Questions

Why does the page refresh after selecting a file?
How can I prevent this refresh so that the JavaScript scripts (like date picker) still work?

Any insights would be appreciated! Thanks! 🙏

jlucia

1 year ago

Best Answer

Level 8

Are you wrapping the form with a wire:submit.prevent="save"?

bvfi-dev

1 year ago

Level 3

@jlucia I think that the issue is with not having .prevent as well, but I'd like to extend this answer:

<form wire:submit.prevent="save" enctype="multipart/form-data">
    <input 
        type="file"
        wire:model="form.activities.{{ $index }}.proof"
        class="input w-full"
        id="proof-{{ $index }}"
    />
    <button type="submit" class="btn">Save</button>
</form>

You shouldn't have form attributes like action or method. The form should have 1 button of type "submit", make sure that other buttons have type "button"
If none above are issues, then try reinitializing after livewire updates:

public function updated($propertyName)
{
    if ($propertyName === 'form.activities.*.proof') {
        $this->dispatch('init-date-pickers');
    }
}
//And then in the frontend:
Livewire.on('init-date-pickers', () => {
    // re-initialize date picker plugin
});

Please or to participate in this conversation.