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>
1 Reply
I've added in my Gallery modal
$casts = ['files' => 'array'] , but didn't change anything.
I found out that if I move the FileUpload before the TextInput it works,
public function form(Form $form): Form
{
return $form
->schema([
FileUpload::make('files')
->multiple()
->image()
->required()
->acceptedFileTypes(['image/*'])
->imageCropAspectRatio('1:1')
->directory('groups/' . $this->group->id . '/gallery'),
TextInput::make('title')
->required()
->rules(['required', 'string', 'min:1', 'max:255']),
])
->statePath('state')
->model(Gallery::class);
}
public function form(Form $form): Form
{
return $form
->schema([
FileUpload::make('files')
->multiple()
->image()
->required()
->acceptedFileTypes(['image/*'])
->imageCropAspectRatio('1:1')
->directory('groups/' . $this->group->id . '/gallery'),
TextInput::make('title')
->required()
->rules(['required', 'string', 'min:1', 'max:255']),
])
->statePath('state')
->model(Gallery::class);
}