If you want Filament field to choose and select an Image from a group of images with a Radio button This is Image Radio button to replacing traditional radio buttons with images selection.
You can install the package via composer:
composer require alkoumi/filament-image-radio-button
The radio buttom has options then the scenario Here is you have
Model Report
and you want to choose a design of a report
so options here must return return Report::pluck('file', 'id')->toArray();
the options will be like
[ 1 => reort1.jpg , 2 => reort2.jpg]
then the user will choose the design.
You must define where you stored the images in filesystems
disks
somthing like local
or public
so in this example I am using ->disk('reports')
So the component can find the images files
'local' => [
'driver' => 'local',
'root' => storage_path('app/private'),
'serve' => true,
'throw' => false,
],
'public' => [
'driver' => 'local',
'root' => storage_path('app/public'),
'url' => env('APP_URL') . '/storage',
'visibility' => 'public',
'throw' => false,
],
'reports' => [
'driver' => 'local',
'root' => storage_path('app/public/reports'),
'url' => env('APP_URL') . '/reports',
'visibility' => 'public',
'throw' => false,
],
use Alkoumi\FilamentImageRadioButton\Forms\Components\ImageRadioGroup;
ImageRadioGroup::make('report_id')
->disk('reports')
->options(fn () => Report::pluck('file', 'id')->toArray()),
use Alkoumi\FilamentImageRadioButton\Forms\Components\ImageRadioGroup;
ImageRadioGroup::make('report_id')
->animation(true)
->required()
->label(__('Report Design'))
->disk('reports')
->options(fn (Get $get) => Report::whereType($get('type_id'))->pluck('file', 'id')->toArray())
->afterStateUpdated(fn(Get $get, Set $set, ?string $state) => $set('reportdesign', ['report' => Report::find($state), 'date' => explode(' ', $get('report_date'))[0]]))
->live(),
Please see CHANGELOG for more information on what has changed recently.
Please see CONTRIBUTING for details.
Please review our security policy on how to report security vulnerabilities.
The MIT License (MIT). Please see License File for more information.