Can't create a custom field
I'm trying to create a custom field which takes some pictures from local disk, display them with a text field next to them so i can specify product image color.
Livewire Entangle Error: Livewire property ['colors.livewire-tmp/livewire-tmp/AkQmjBzqVhyP0VbvFko66HcrzJXdDF-metaU2NyZWVuc2hvdCAyMDIzLTEwLTE3IGF0IDAwLjU0LjQ0LnBuZw==-.png'] cannot be found on component: ['app.filament.resources.shop.product-resource.pages.create-product']
Also i tried using x-dynamic-component but im getting undefined getFieldWrapperView
<pre>{{ json_encode($colors, JSON_PRETTY_PRINT) }}</pre>
@foreach ($colors as $index => $image)
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center">
<img src="{{ asset($image['file']) }}" alt="Image" style="max-width: 100px; max-height:50px">
<input type="hidden" name="image_file_{{ $index }}" value="{{ $image['file'] }}">
<div x-data="{ colorState: $wire.$entangle('colors.' + 'livewire-tmp/{{ $image['file'] }}') }">
<input x-model="colorState" style="color:black" type="text" name="color[]" placeholder="Color for {{ $image['file'] }}">
</div>
</div>
@endforeach1 Reply
<?php
namespace App\Forms\Components;
use Filament\Forms\Components\Field;
use Illuminate\View\View;
class FileUploadColorForm extends Field
{
public $colors = [];
protected string $view = 'forms.components.file-upload-color';
public function getImages()
{
$images = [];
$files = \Storage::disk('livewire-tmp')->files();
foreach ($files as $file) { $images[] = [ 'file' => 'livewire-tmp/' . $file, ];
if (!isset($this->colors['livewire-tmp/' . $file])) { $this->colors['livewire-tmp/' . $file] = 'none'; logger($this->colors); } }
return $images; } public function render(): View { $this->getImages(); return view($this->view, ['colors' => $this->getImages()]); } public function mount() { \Log::info('Component state:', $this->colors); }
}
foreach ($files as $file) { $images[] = [ 'file' => 'livewire-tmp/' . $file, ];
if (!isset($this->colors['livewire-tmp/' . $file])) { $this->colors['livewire-tmp/' . $file] = 'none'; logger($this->colors); } }
return $images; } public function render(): View { $this->getImages(); return view($this->view, ['colors' => $this->getImages()]); } public function mount() { \Log::info('Component state:', $this->colors); }
}