Livewire3: Edited attributes are not stored in DB plus user gets logged out

I guess I need some more eyes and brains. I create an app where I want to be able to edit blogposts. I have written this as a livewire component. My Blade file resources/views/livewire/admin/post/edit.blade.php looks like this:

<div class="p-6">
    <h1 class="text-2xl font-semibold mb-6">Post bearbeiten</h1>

    <form wire:submit.prevent="save" class="space-y-6">
        @csrf
        <div>
            <label class="block text-sm font-medium text-gray-700">Titel</label>
            <input type="text" wire:model="form.title" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
            @error('form.title')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700">Kategorie</label>
            <select wire:model="form.category_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
                <option value="">Wähle eine Kategorie...</option>
                @foreach ($categories as $category)
                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                @endforeach
            </select>
            @error('form.category_id')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700">Aktuelles Bild</label>
            @if ($form->image)
                <img src="{{ Storage::url($form->image) }}" alt="Current image" class="mt-2 h-32 w-auto">
            @endif

            <label class="block text-sm font-medium text-gray-700 mt-4">Neues Bild hochladen</label>
            <input type="file" wire:model="newImage" class="mt-1 block w-full">
            @error('newImage')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700">Inhalt</label>
            <textarea wire:model="form.body" rows="10" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"></textarea>
            @error('form.body')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

        <div>
            <label class="flex items-center">
                <input type="checkbox" wire:model="form.featured"
                    class="rounded border-gray-300 text-blue-600 shadow-sm">
                <span class="ml-2">Featured Post</span>
            </label>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700">Veröffentlichen am</label>
            <input type="datetime-local" wire:model="form.published_at"
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
            @error('form.published_at')
                <span class="text-red-500 text-sm">{{ $message }}</span>
            @enderror
        </div>

        <div class="flex justify-end gap-4">
            <a href="{{ route('admin_post_index') }}"
                class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50">
                Abbrechen
            </a>
            <button type="submit"
                class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
                Änderungen speichern
            </button>
        </div>
    </form>
</div>

My livewire component looks like this:

<?php

namespace App\Livewire\Admin\Post;

use App\Models\Post;
use App\Models\Category;
use Livewire\Component;
use Livewire\WithFileUploads;
use App\Livewire\Forms\PostForm;
use Carbon\Carbon;

class Edit extends Component
{
    use WithFileUploads;

    public PostForm $form;
    public $categories;
    public $newImage;

    public function mount(Post $post)
    {
        $this->form->setPost($post);
        $this->categories = Category::all();
    }

    public function save()
    {
        ray('I am on save');
        $post = $this->form->save();

        session()->flash('message', 'Post erfolgreich aktualisiert.');
        return redirect()->route('admin_post_index');
    }

    public function render()
    {
        return view('livewire.admin.post.edit')->layout('components.layouts.peg-admin');
    }
}

and my PostForm looks like this:

<?php

namespace App\Livewire\Forms;

use Livewire\Attributes\Validate;
use Livewire\Form;
use App\Models\Post;
use Illuminate\Support\Str;
use Carbon\Carbon;

class PostForm extends Form
{
    public ?Post $post = null;

    #[Validate('required|min:5')]
    public $title = '';

    #[Validate('required|min:10')]
    public $body = '';

    #[Validate('required|exists:categories,id')]
    public $category_id = '';

    #[Validate('nullable|image|max:1024')]
    public $image = '';

    public $featured = false;

    public $published_at = '';

    public function setPost(Post $post)
    {
        $this->post = $post;
        $this->title = $post->title;
        $this->body = $post->body;
        $this->category_id = $post->category_id;
        $this->image = $post->image;
        $this->featured = $post->featured;
        $this->published_at = Carbon::parse($post->published_at)->format('Y-m-d\TH:i');
    }

    public function save()
    {
        $this->validate();

        if ($this->post) {
            return $this->update();
        }

        return $this->store();
    }

    protected function store()
    {
        $post = Post::create([
            'title' => $this->title,
            'body' => $this->body,
            'category_id' => $this->category_id,
            'image' => $this->image,
            'featured' => $this->featured,
            'published_at' => $this->published_at,
            'slug' => Str::slug($this->title),
        ]);

        return $post;
    }

    protected function update()
    {
        $this->post->update([
            'title' => $this->title,
            'body' => $this->body,
            'category_id' => $this->category_id,
            'image' => $this->image,
            'featured' => $this->featured,
            'published_at' => $this->published_at,
            'slug' => Str::slug($this->title),
        ]);

        return $this->post;
    }
}

When I try to save the changes of the blogpost attributes in the app, I get logged out and no changes are stored in the DB. Also the save() methode does not seems to be called, since I do not see any output in ray().

What am I doing wrong?

LaryAI

1 year ago

Level 58

The issue you're experiencing, where the user gets logged out and changes are not stored in the database, could be due to a few potential problems. Let's go through some troubleshooting steps and solutions:

CSRF Token: Ensure that the CSRF token is correctly included in your form. However, since you're using Livewire, it should handle CSRF tokens automatically. Double-check that your session is not expiring or being invalidated for some reason.
Session Configuration: Check your session configuration in config/session.php. Ensure that the session driver is correctly set and that the session is not being cleared or expired prematurely.
Middleware: Ensure that your Livewire component is not being affected by middleware that might be logging out the user. Check your web middleware group and any custom middleware that might be interfering.
Livewire Lifecycle: If the save() method is not being called, it might be due to a JavaScript error or a problem with the Livewire lifecycle. Open your browser's developer tools and check the console for any JavaScript errors.
Debugging: Add some debugging statements to ensure that the mount() method is being called correctly and that the form data is being set as expected. You can use ray() or dd() to inspect the data.
File Uploads: Since you're using file uploads, ensure that your php.ini settings allow for the file sizes you're working with. Also, make sure that the newImage property is being handled correctly in your save() method.
Validation: Ensure that your validation rules are not causing the form submission to fail silently. You can add a try-catch block around your validation to catch any exceptions and log them.

Here's a checklist of things to verify and a potential solution:

public function save()
{
    try {
        $this->validate();

        if ($this->newImage) {
            $this->image = $this->newImage->store('images', 'public');
        }

        if ($this->post) {
            $this->update();
        } else {
            $this->store();
        }

        session()->flash('message', 'Post erfolgreich aktualisiert.');
        return redirect()->route('admin_post_index');
    } catch (\Exception $e) {
        // Log the exception or use ray() to debug
        ray($e->getMessage());
        session()->flash('error', 'An error occurred while saving the post.');
    }
}

Check for JavaScript Errors: Open the browser console and ensure there are no JavaScript errors that might be preventing Livewire from functioning correctly.
Session Storage: Ensure that your session storage is correctly configured and that the session is not being cleared unexpectedly.
File Upload Handling: If you're uploading a new image, ensure that the file is being processed and stored correctly. You might need to handle the file upload separately if it's causing issues.

By following these steps, you should be able to identify the root cause of the problem and resolve the issue with your Livewire component.

Phread

1 year ago

Level 3

In my previous app when I was dealing with attachments I needed to do the following in the blade:

<form .......  enctype="multipart/form-data">

When enctype="multipart/form-data" was not present, I would receive an error-500 and would get logged out.

Please or to participate in this conversation.