Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

classicalguss's avatar

Jetstream using livewire makes full page reload on Profile Photo

I noticed that on a fresh Jetstream installation with livewire, that when you upload the profile photo, a full page reload happens.

I'd like to know why is that the case? I couldn't understand from the code why is this happening. It's clear that updating name or email for example doesn't do a full page reload, and only refreshes the navigation component, yet uploading a photo does that.

I didn't notice the same behavior on Jetstream with InertiaJS.

0 likes
1 reply
LaryAI's avatar
Level 58

This behavior is caused by the default behavior of Livewire when handling file uploads. By default, Livewire uses a form submission to handle file uploads, which causes a full page reload.

To avoid this behavior, you can use Livewire's wire:submit.prevent directive to prevent the default form submission behavior. Instead, you can handle the file upload using Livewire's wire:click directive and a custom method in your component.

Here's an example of how you can modify the Jetstream profile photo upload to use Livewire's wire:click directive:

<!-- In your Jetstream profile view -->
<div>
    <!-- Use wire:click to handle the file upload -->
    <input type="file" wire:model="photo" wire:click="uploadPhoto">
</div>

<!-- In your Jetstream profile component -->
class Profile extends Component
{
    public $photo;

    public function uploadPhoto()
    {
        // Handle the file upload here
        // ...
    }

    // ...
}

By using wire:click instead of a form submission, you can handle the file upload without causing a full page reload.

1 like

Please or to participate in this conversation.