Daniel Veselinov
Daniel Veselinov
FFilament
Created by Daniel Veselinov on 3/19/2024 in #❓┊help
Fileupload Component Multiple Files froze buttons on the modal
Facing an issue with the ->multiple() method in their Livewire Fileupload component. When this method is used, it causes the buttons on the modal to freeze. However, when the ->multiple() method is removed, the buttons work fine.
public function form(Form $form): Form
{
return $form
->schema([
FileUpload::make('files')
->image()
//->multiple()
->required()
->acceptedFileTypes(['image/*'])
->imageCropAspectRatio('1:1')
->directory('groups/' . $this->group->id . '/gallery'),
])
->statePath('state')
->model(Gallery::class);
}
public function form(Form $form): Form
{
return $form
->schema([
FileUpload::make('files')
->image()
//->multiple()
->required()
->acceptedFileTypes(['image/*'])
->imageCropAspectRatio('1:1')
->directory('groups/' . $this->group->id . '/gallery'),
])
->statePath('state')
->model(Gallery::class);
}
<div>
<x-dialog-modal wire:model="galleryCreateDialogOpened">
<x-slot:title>
{{ __('Create album') }}
</x-slot:title>
<x-slot:content>
<form wire:submit="attemptCreate" class="mt-4">
<div class="grid grid-cols-1 gap-2">
{{ $this->form }}
</div>
</form>
</x-slot:content>
<x-slot:footer>
<x-button wire:click="attemptCreate" wire:loading.attr="disabled" class="mr-2.5">
{{ __('Submit') }}
</x-button>
<x-secondary-button wire:click="$toggle('galleryCreateDialogOpened')" wire:target="attemptCreate"
wire:loading.attr="disabled">Cancel
</x-secondary-button>
</x-slot:footer>
</x-dialog-modal>

@auth
@if(auth()->user()->memberGroups->contains($group->id) or auth()->user()->ownedGroups->contains($group->id))
<button wire:click="showDialog" class="text-purple-500 hover:text-purple-600 underline">Create album
</button>
@endif
@endauth
</div>
<div>
<x-dialog-modal wire:model="galleryCreateDialogOpened">
<x-slot:title>
{{ __('Create album') }}
</x-slot:title>
<x-slot:content>
<form wire:submit="attemptCreate" class="mt-4">
<div class="grid grid-cols-1 gap-2">
{{ $this->form }}
</div>
</form>
</x-slot:content>
<x-slot:footer>
<x-button wire:click="attemptCreate" wire:loading.attr="disabled" class="mr-2.5">
{{ __('Submit') }}
</x-button>
<x-secondary-button wire:click="$toggle('galleryCreateDialogOpened')" wire:target="attemptCreate"
wire:loading.attr="disabled">Cancel
</x-secondary-button>
</x-slot:footer>
</x-dialog-modal>

@auth
@if(auth()->user()->memberGroups->contains($group->id) or auth()->user()->ownedGroups->contains($group->id))
<button wire:click="showDialog" class="text-purple-500 hover:text-purple-600 underline">Create album
</button>
@endif
@endauth
</div>
3 replies
FFilament
Created by Daniel Veselinov on 2/26/2024 in #❓┊help
Adding a Filament form (select component) to a Livewire(v3.x) component
Hi everyone, I'm trying to implement Filament forms in my livewire component. What I'm trying to do? I'm using a filament select component with multiple choices linked to a relation. After saving, the 'interests' aren't displayed upon page refresh, despite being correctly synced in the database. However, when viewed through the filament admin panel, the selected interests are displayed correctly.
class UpdateInterestForm extends Component implements HasForms
{
use InteractsWithForms;

public User $user;
public $interests;

public function mount(): void
{
$this->user = Auth::user();
}

public function updateInterestUser(): void
{
$this->user->interests()->sync($this->interests);

$this->dispatch('saved');
}

public function form(Form $form): Form
{
return $form
->schema([
Select::make('interests')
->multiple()
->preload()
->relationship('interests', 'name')
->minItems(1)
->maxItems(15)
])
->model(User::class);
}

public function render(): View
{
return view('livewire.profile.update-interest-form');
}
}
class UpdateInterestForm extends Component implements HasForms
{
use InteractsWithForms;

public User $user;
public $interests;

public function mount(): void
{
$this->user = Auth::user();
}

public function updateInterestUser(): void
{
$this->user->interests()->sync($this->interests);

$this->dispatch('saved');
}

public function form(Form $form): Form
{
return $form
->schema([
Select::make('interests')
->multiple()
->preload()
->relationship('interests', 'name')
->minItems(1)
->maxItems(15)
])
->model(User::class);
}

public function render(): View
{
return view('livewire.profile.update-interest-form');
}
}
Relation in the User model:
php
public function interests(): BelongsToMany { return $this->belongsToMany(Interest::class); }
php
public function interests(): BelongsToMany { return $this->belongsToMany(Interest::class); }
Relation in the Interest model:
php
public function users(): BelongsToMany { return $this->belongsToMany(User::class); }
php
public function users(): BelongsToMany { return $this->belongsToMany(User::class); }
Note: this very code, Select::make('interests').. in my UserResource filament works just fine, the problem is in the Livewire component. Filament - UserResource !image Livewire - !image
15 replies