I have a model for Product and a related ProductAsset model for images, videos or documents related to the product. What I want to achieve is to let the user upload the main image as a product asset (flag is_primary=true) in the same form as the rest of the information.
Here is my Product model:
namespace AppModels;
use IlluminateDatabaseEloquentModel;
class Product extends Model
{
protected $fillable = [
'name',
'description',
'is_active',
'category_id',
];
public function menus()
{
return $this->belongsToMany(Catalog::class);
}
public function category()
{
return $this->belongsTo(Category::class);
}
public function assets()
{
return $this->hasMany(ProductAsset::class);
}
public function allergens()
{
return $this->belongsToMany(Allergen::class);
}
public function mainImage()
{
return $this->assets()->where('is_primary', true)->first();
}
}
And my ProductAsset model:
namespace AppModels;
use IlluminateDatabaseEloquentModel;
class ProductAsset extends Model
{
protected $fillable = [
'name',
'type',
'path',
'is_primary',
'product_id',
];
public function product()
{
return $this->belongsTo(Product::class);
}
}
In my Filament/Resources/ProductResource.php, I have the following in the form() method:
public static function form(Form $form): Form
{
return $form
->columns(12)
->schema([
Group::make()->schema([
FileUpload::make('image')
->label('Imagen')
->avatar()
->placeholder(function ($record) {
if ($record && $record->mainImage()) {
$main_image = $record->mainImage();
$imagePath = asset("/storage/" . $main_image->path);
return <<<HTML
<img src="$imagePath" alt="Imagen principal" class="cropper-crop-box">
HTML;
}
})
->required(),
])
->columnSpan(2),
Group::make()->schema([
TextInput::make('name')
->label('Nombre')
->required(),
Textarea::make('description')
->label('Descripción')
->required(),
Select::make('category_id')
->label('Categoría')
->relationship(name: 'category', titleAttribute: 'name')
->required(),
Toggle::make('is_active')
->default(true)
->label('Activo'),
])
->columnSpan(10),
]);
}
So, in the Filament/Resources/CreateProduct.php I handle the file using the mutateFormDataBeforeCreate() and afterCreate() method:
protected function mutateFormDataBeforeCreate(array $data): array
{
$main_image = $data['image'];
unset($data['image']);
$this->creatingProductAsset = $main_image;
return $data;
}
protected function afterCreate()
{
if ($this->creatingProductAsset) {
ProductAsset::create([
'name' => 'Imagen principal',
'type' => 'image',
'path' => $this->creatingProductAsset,
'product_id' => $this->record->id,
'is_primary' => true, //
]);
}
}
So far so good! My image is uploading, and the related record is created successfully.
Here is the problem: when I enter the view/edit page, it’ll show the image as a placeholder but it won’t attatch the value to the field. Of course, I won’t be able to save changes until I upload a new one. That’s logic since I’m showing the actual image as a placeholder instead of loading it into the field’s state.
Now, my question is, how do I bind the already uploaded image as the field value so the record can be updated without uploading a new one? How should I use the ->afterStateHydrated method in the field to link the actual image instead of showing it as a placeholder?
Than you all in advance!