Filament•2y ago•

3 replies

File upload with Livewire component

I am trying to use

SpatieMediaLibraryFileUpload

SpatieMediaLibraryFileUpload

component with Livewire component in a filament form. I have followed steps as mentioned at https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component#setting-up-the-livewire-component to make the form work, but the files somehow are not getting uploaded.

SpatieMediaLibraryFileUpload::make('photo')
                            ->label('Member Photograph')
                            ->collection('member_photos')
                            ->conversion('preview')
                            ->imagePreviewHeight('250')
                            ->required()
                            ->image(),

SpatieMediaLibraryFileUpload::make('photo')
                            ->label('Member Photograph')
                            ->collection('member_photos')
                            ->conversion('preview')
                            ->imagePreviewHeight('250')
                            ->required()
                            ->image(),

The above element code works in filament v3 admin panel with a filepond component.

I am trying to save the data in a custom method with following code

Member:create($this->form->getState());

Member:create($this->form->getState());

It saves the data to database without the spatie media upload.

DDing

$this->form->getState();

$this->form->getState();

doesn't show the

member_photos

member_photos

element in it.

Adding a form to a Livewire component - Form Builder - Filament

Solution

The solution is to save the relationships manually with model creation. Means, if you are passing

Model::class

Model::class

to the

->model(Model::class);

->model(Model::class);

form creation method, you have to manually save the relationships by calling

saveRelationships()

saveRelationships()

method on

form

form

class.

$this->form->model($member)->saveRelationships();

$this->form->model($member)->saveRelationships();

Jump to solution

File upload with Livewire component

I am trying to use

SpatieMediaLibraryFileUpload

SpatieMediaLibraryFileUpload

SpatieMediaLibraryFileUpload::make('photo')
                            ->label('Member Photograph')
                            ->collection('member_photos')
                            ->conversion('preview')
                            ->imagePreviewHeight('250')
                            ->required()
                            ->image(),

SpatieMediaLibraryFileUpload::make('photo')
                            ->label('Member Photograph')
                            ->collection('member_photos')
                            ->conversion('preview')
                            ->imagePreviewHeight('250')
                            ->required()
                            ->image(),

The above element code works in filament v3 admin panel with a filepond component.

I am trying to save the data in a custom method with following code

Member:create($this->form->getState());

Member:create($this->form->getState());

It saves the data to database without the spatie media upload.

DDing

$this->form->getState();

$this->form->getState();

doesn't show the

member_photos

member_photos

element in it.

Adding a form to a Livewire component - Form Builder - Filament

Solution

The solution is to save the relationships manually with model creation. Means, if you are passing

Model::class

Model::class

to the

->model(Model::class);

->model(Model::class);

form creation method, you have to manually save the relationships by calling

saveRelationships()

saveRelationships()

method on

form

form

class.

$this->form->model($member)->saveRelationships();

$this->form->model($member)->saveRelationships();

Jump to solution

File upload with Livewire component

File upload with Livewire component

Similar Threads

Similar Threads

Similar Threads