Profile Image

Hi,

I want to add a profile Image to a user. The image is a part of the user profile what is a different Model. The function profile Image is a section of the livewire profile show page.

I added the following to the show.blade.php

<livewire:profile-image :user="$user"/>

In my User model I have.

    public function profile(): HasOne
    {
        return $this->hasOne(Profile::class);
    }

In my Profile model I have:

    public function user(): BelongsTo
    {
        return $this->belongsTo(User::class);
    }

I created a livewire component ProfileImage:

<x-form-section submit="storeImage">
    <x-slot name="title">
        {{ __('Change profile image') }}
    </x-slot>

    <x-slot name="description">
        {{ __('This is the profile image above your profile page') }}
    </x-slot>

    <x-slot name="form">
        <div class="w-full">
            @if ($image && method_exists($image, 'temporaryUrl'))
                <img src="{{ $image->temporaryUrl() }}" class="img-fluid mb-4 w-full h-56"/>
            @elseif($image)
                <img src="{{ $image }}" class="object-scale-down object-center mb-4 w-full h-56"/>
            @endif

            <div wire:ignore
                 x-data
                 x-init="() => {
                FilePond.setOptions({
                    server: {
                        process:(fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                            @this.upload('image', file, load, error, progress)
                        },
                        revert: (filename, load) => {
                            @this.removeUpload('image', filename, load)
                        }
                    },
                    allowImagePreview: true,
                    imagePreviewMaxHeight: 256,
                    allowFileTypeValidation: true
                });
                FilePond.registerPlugin(FilePondPluginFileValidateType);
                FilePond.create($refs.input, {
                    acceptedFileTypes: ['image/jpeg', 'image/jpg', 'image/gif', 'image/png']
                });
            }">
                <input type="file" x-ref="input">
            </div>
        </div>
        @error('image')
        <span class="text-xs text-red-500">{{ $message }}</span>
        @enderror
    </x-slot>

    <x-slot name="actions">
        <x-action-message class="me-3" on="saved">
            {{ __('Saved.') }}
        </x-action-message>

        <x-button wire:loading.attr="disabled" wire:target="image">
            {{ __('Save') }}
        </x-button>
    </x-slot>
</x-form-section>

and the logic

<?php

namespace App\Livewire;

use App\Models\Profile;
use Illuminate\Http\RedirectResponse;
use Illuminate\Routing\Redirector;
use Livewire\Component;
use Livewire\WithFileUploads;

class ProfileImage extends Component
{
    use WithFileUploads;

    public ?Profile $profile = null;

    public $image;

    public function Mount(Profile $profile)
    {
        if ($profile->exists) {
            $this->profile = $profile;
            $this->image = $this->profile->getFirstMediaUrl('profile_image');
        }
    }

    public function updatedImage()
    {
        $this->validate([
            'image' => 'image|max:1024',
        ]);
    }

    public function render()
    {
        return view('livewire.profile-image');
    }

    public function storeImage(): RedirectResponse|Redirector
    {
        if (empty($this->profile)) {
            $profile = Profile::create($this->only('user_id'));
            $profile->addMedia($this->image->getRealPath())->toMediaCollection('profile_image');
        } else {
            $this->profile->update($this->only('user_id'));
            $this->profile->clearMediaCollection('profile_image');
            $this->profile->addMedia($this->image->getRealPath())->toMediaCollection('profile_image');
        }

        return redirect()->back();
    }
}

How to connect the active user to this components. I get all kinds off errors.

Can someone help me.