CuratorPicker Not Working in Livewire

abbasmashaddy72 commented 4 months ago

Filament Version

3.2

Plugin Version

3.4

PHP Version

8.2

Problem description

Unable to use CuratorPicker with Livewire Form

Uncaught (in promise) Could not find Livewire component in DOM tree file-upload.js:40:85028

Alpine Expression Error: can't access property "name", file is undefined

Expression: "$wire.upload"

<form class="w-full" wire:submit="upload">
[livewire.js:1235:13](http://manage-project.test/livewire/livewire.js?id=a27c4ca2)
Uncaught TypeError: can't access property "name", file is undefined

Expected behavior

To Work Futilely

Steps to reproduce

Created a From within Livewire, but not working:

Livewire Component:

<?php

namespace App\Livewire\Ticket;

use App\Models\Ticket;
use Livewire\Component;
use Filament\Forms\Form;
use Filament\Forms\Contracts\HasForms;
use Illuminate\Database\Eloquent\Model;
use Filament\Notifications\Notification;
use Filament\Forms\Concerns\InteractsWithForms;
use Awcodes\Curator\Components\Forms\CuratorPicker;
use Livewire\WithFileUploads;

class Attachments extends Component implements HasForms
{
    use InteractsWithForms, WithFileUploads;

    public Ticket $ticket;

    protected $listeners = [
        'filesUploaded'
    ];

    public function mount(): void
    {
        $this->form->fill();
    }

    public function render()
    {
        return view('livewire.ticket.attachments');
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                CuratorPicker::make('attachments')
                    ->helperText(__('Here you can attach all files needed for this ticket'))
                    ->multiple()
                    ->tenantAware()
                    ->listDisplay()
            ])
            ->statePath('data');
    }

    protected function getFormModel(): Model|string|null
    {
        return $this->ticket;
    }

    public function upload(): void
    {
        $this->ticket->update($this->form->getState());

        $this->emit('filesUploaded');

        Notification::make()
            ->title(__('Ticket attachments saved'))
            ->success()
            ->send();
    }

    public function filesUploaded(): void
    {
        $this->ticket->refresh();
    }
}

View:

<div class="flex flex-col w-full gap-5" wire:key='attachments'>
    <form wire:submit="upload" class="w-full">
        {{ $this->form }}

        <x-filament::button type="submit" class="mt-2" wire:loading.prop="disabled">
            {{ __('Upload') }}
        </x-filament::button>
    </form>

    <x-filament-actions::modals />
</div>

Model: Not Using any Relation

 protected $fillable = [
        'name',
        'code',
        'order',
        'content',
        'issue_link',
        'pr_link',
        'estimation',
        'attachments',
    ];

    protected $casts = [
        'attachments' => 'array',
    ];

Reproduction repository

No response

Relevant log output

No response

awcodes commented 4 months ago

try adding

public ?array $data = [];

to your component.

You are telling the form to use 'data' as the statePath but you aren't defining it as a property on the model.

abbasmashaddy72 commented 4 months ago

It still shows the same Alpine Error:

Alpine Expression Error: can't access property "name", file is undefined

Expression: "$wire.upload"

<form class="fi-form grid gap-y-6" method="post" x-data="{ isProcessing: false }" x-on:submit="if (isProcessing) $event.preventDefault()" x-on:form-processing-started="isProcessing = true" x-on:form-processing-finished="isProcessing = false" wire:submit="upload" data-has-alpine-state="true">

I thought that the issue is because I have not added curator model. So, I updated my View Code but Still same:

<div class="flex flex-col w-full gap-5" wire:key='attachments'>
    <x-filament-panels::form wire:submit="upload">
        {{ $this->form }}

        <x-filament::button type="submit" class="mt-2" wire:loading.prop="disabled">
            {{ __('Upload') }}
        </x-filament::button>
    </x-filament-panels::form>

    <x-filament-actions::modals />
    <x-curator::modals.modal />
</div>

The Below the Full Error I get in Console: You can Have Look @ my Repo

Uncaught (in promise) Could not find Livewire component in DOM tree [file-upload.js:40:85028](http://manage-project.test/js/filament/forms/components/file-upload.js?v=3.2.29.0)

Alpine Expression Error: can't access property "name", file is undefined

Expression: "$wire.upload"

<form class="fi-form grid gap-y-6" method="post" x-data="{ isProcessing: false }" x-on:submit="if (isProcessing) $event.preventDefault()" x-on:form-processing-started="isProcessing = true" x-on:form-processing-finished="isProcessing = false" wire:submit.prevent="upload" data-has-alpine-state="true">
[livewire.js:1235:13](http://manage-project.test/livewire/livewire.js?id=a27c4ca2)
Uncaught TypeError: can't access property "name", file is undefined
    fileInfos http://manage-project.test/livewire/livewire.js?id=a27c4ca2:626
    startUpload http://manage-project.test/livewire/livewire.js?id=a27c4ca2:625
    setUpload http://manage-project.test/livewire/livewire.js?id=a27c4ca2:572
    upload http://manage-project.test/livewire/livewire.js?id=a27c4ca2:543
    upload http://manage-project.test/livewire/livewire.js?id=a27c4ca2:701
    <anonymous> http://manage-project.test/livewire/livewire.js?id=a27c4ca2:4354
    runIfTypeOfFunction http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1322
    generateEvaluatorFromString http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1310
    tryCatch http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1228
    evaluate http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1252
    execute http://manage-project.test/livewire/livewire.js?id=a27c4ca2:9018
    callAndClearComponentDebounces http://manage-project.test/livewire/livewire.js?id=a27c4ca2:9003
    execute http://manage-project.test/livewire/livewire.js?id=a27c4ca2:9017
    prevent http://manage-project.test/livewire/livewire.js?id=a27c4ca2:9026
    generateEvaluatorFromFunction http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1272
    tryCatch http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1228
    removeListener http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3817
    handler4 http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3144
    handler4 http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3172
    wrapHandler http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3146
    handler4 http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3209
    wrapHandler http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3146
    on2 http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3211
    <anonymous> http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3816
    skipDuringClone http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1887
    flushHandlers http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1390
    stopDeferring http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1395
    deferHandlingDirectives http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1398
    initTree http://manage-project.test/livewire/livewire.js?id=a27c4ca2:913
    start http://manage-project.test/livewire/livewire.js?id=a27c4ca2:861
    onMutate http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1074
    onMutate http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1074
    flushObserver http://manage-project.test/livewire/livewire.js?id=a27c4ca2:984
    flushObserver http://manage-project.test/livewire/livewire.js?id=a27c4ca2:989
    flushObserver http://manage-project.test/livewire/livewire.js?id=a27c4ca2:986
    stopObservingMutations http://manage-project.test/livewire/livewire.js?id=a27c4ca2:977
    mutateDom http://manage-project.test/livewire/livewire.js?id=a27c4ca2:996
    <anonymous> http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3427
    VoidFunction* http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3427
    flushHandlers http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1390
    stopDeferring http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1395
    deferHandlingDirectives http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1398
    initTree http://manage-project.test/livewire/livewire.js?id=a27c4ca2:913
    cloneNode http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1900
    dontRegisterReactiveSideEffects http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1939
    cloneNode http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1899
    patch http://manage-project.test/livewire/livewire.js?id=a27c4ca2:7876
    patchChildren http://manage-project.test/livewire/livewire.js?id=a27c4ca2:8043
    patch http://manage-project.test/livewire/livewire.js?id=a27c4ca2:7887
    patchChildren http://manage-project.test/livewire/livewire.js?id=a27c4ca2:8043
    patch http://manage-project.test/livewire/livewire.js?id=a27c4ca2:7887
    patchChildren http://manage-project.test/livewire/livewire.js?id=a27c4ca2:8043
    patchChildren http://manage-project.test/livewire/livewire.js?id=a27c4ca2:7996
    patchChildren http://manage-project.test/livewire/livewire.js?id=a27c4ca2:7996
    patch http://manage-project.test/livewire/livewire.js?id=a27c4ca2:7887
    morph http://manage-project.test/livewire/livewire.js?id=a27c4ca2:8088
    morph2 http://manage-project.test/livewire/livewire.js?id=a27c4ca2:8866
    <anonymous> http://manage-project.test/livewire/livewire.js?id=a27c4ca2:8925
    VoidFunction* http://manage-project.test/livewire/livewire.js?id=a27c4ca2:8924
    trigger http://manage-project.test/livewire/livewire.js?id=a27c4ca2:448
    processEffects http://manage-project.test/livewire/livewire.js?id=a27c4ca2:4458
    handleResponse http://manage-project.test/livewire/livewire.js?id=a27c4ca2:4032
    succeed http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3966
    succeed http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3966
    sendRequest http://manage-project.test/livewire/livewire.js?id=a27c4ca2:4220
[livewire.js:626:18](http://manage-project.test/livewire/livewire.js?id=a27c4ca2)
    fileInfos http://manage-project.test/livewire/livewire.js?id=a27c4ca2:626
    map self-hosted:221
    startUpload http://manage-project.test/livewire/livewire.js?id=a27c4ca2:625
    setUpload http://manage-project.test/livewire/livewire.js?id=a27c4ca2:572
    upload http://manage-project.test/livewire/livewire.js?id=a27c4ca2:543
    upload http://manage-project.test/livewire/livewire.js?id=a27c4ca2:701
    <anonymous> http://manage-project.test/livewire/livewire.js?id=a27c4ca2:4354
    runIfTypeOfFunction http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1322
    generateEvaluatorFromString http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1310
    tryCatch http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1228
    evaluate http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1252
    execute http://manage-project.test/livewire/livewire.js?id=a27c4ca2:9018
    callAndClearComponentDebounces http://manage-project.test/livewire/livewire.js?id=a27c4ca2:9003
    execute http://manage-project.test/livewire/livewire.js?id=a27c4ca2:9017
    prevent http://manage-project.test/livewire/livewire.js?id=a27c4ca2:9026
    generateEvaluatorFromFunction http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1272
    tryCatch http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1228
    removeListener http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3817
    handler4 http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3144
    handler4 http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3172
    wrapHandler http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3146
    handler4 http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3209
    wrapHandler http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3146
    (Async: EventListener.handleEvent)
    on2 http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3211
    <anonymous> http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3816
    skipDuringClone http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1887
    flushHandlers http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1390
    stopDeferring http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1395
    deferHandlingDirectives http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1398
    initTree http://manage-project.test/livewire/livewire.js?id=a27c4ca2:913
    start http://manage-project.test/livewire/livewire.js?id=a27c4ca2:861
    onMutate http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1074
    forEach self-hosted:203
    onMutate http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1074
    flushObserver http://manage-project.test/livewire/livewire.js?id=a27c4ca2:984
    flushObserver http://manage-project.test/livewire/livewire.js?id=a27c4ca2:989
    (Async: VoidFunction)
    flushObserver http://manage-project.test/livewire/livewire.js?id=a27c4ca2:986
    stopObservingMutations http://manage-project.test/livewire/livewire.js?id=a27c4ca2:977
    mutateDom http://manage-project.test/livewire/livewire.js?id=a27c4ca2:996
    <anonymous> http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3427
    (Async: VoidFunction)
    <anonymous> http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3427
    flushHandlers http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1390
    stopDeferring http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1395
    deferHandlingDirectives http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1398
    initTree http://manage-project.test/livewire/livewire.js?id=a27c4ca2:913
    cloneNode http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1900
    dontRegisterReactiveSideEffects http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1939
    cloneNode http://manage-project.test/livewire/livewire.js?id=a27c4ca2:1899
    patch http://manage-project.test/livewire/livewire.js?id=a27c4ca2:7876
    patchChildren http://manage-project.test/livewire/livewire.js?id=a27c4ca2:8043
    patch http://manage-project.test/livewire/livewire.js?id=a27c4ca2:7887
    patchChildren http://manage-project.test/livewire/livewire.js?id=a27c4ca2:8043
    patch http://manage-project.test/livewire/livewire.js?id=a27c4ca2:7887
    patchChildren http://manage-project.test/livewire/livewire.js?id=a27c4ca2:8043
    patchChildren http://manage-project.test/livewire/livewire.js?id=a27c4ca2:7996
    patchChildren http://manage-project.test/livewire/livewire.js?id=a27c4ca2:7996
    patch http://manage-project.test/livewire/livewire.js?id=a27c4ca2:7887
    morph http://manage-project.test/livewire/livewire.js?id=a27c4ca2:8088
    morph2 http://manage-project.test/livewire/livewire.js?id=a27c4ca2:8866
    <anonymous> http://manage-project.test/livewire/livewire.js?id=a27c4ca2:8925
    (Async: VoidFunction)
    <anonymous> http://manage-project.test/livewire/livewire.js?id=a27c4ca2:8924
    trigger http://manage-project.test/livewire/livewire.js?id=a27c4ca2:448
    processEffects http://manage-project.test/livewire/livewire.js?id=a27c4ca2:4458
    handleResponse http://manage-project.test/livewire/livewire.js?id=a27c4ca2:4032
    succeed http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3966
    forEach self-hosted:203
    succeed http://manage-project.test/livewire/livewire.js?id=a27c4ca2:3966
    sendRequest http://manage-project.test/livewire/livewire.js?id=a27c4ca2:4220
    InterpretGeneratorResume self-hosted:1465
    AsyncFunctionNext self-hosted:852

awcodes commented 4 months ago

Why are you hijacking the upload? Seems like you're trying to use Curator to do something that it already does.

abbasmashaddy72 commented 4 months ago

What I am actually trying to do is to save the uploaded files in DB, Which is what I am unable to achieve

abbasmashaddy72 commented 4 months ago

I just fix it trough normal filament resources not using livewire but please test it out why it is not working in livewire

I wanted to update the db by adding the media using livewire

awcodes / filament-curator