Show preview of already saved image in FileUpload
I am trying to show my already saved image in the FileUpload component. I have two issues:
1. I have to put the URL in an array otherwise I get
2. It does not load my image.
I have stripped out everything and hardcoded the URL for simplicity. In this database only the file name is stored, so I will need to modify it anyway to have the full path.
1. I have to put the URL in an array otherwise I get
foreach() argument must be of type array|object, string given2. It does not load my image.
I have stripped out everything and hardcoded the URL for simplicity. In this database only the file name is stored, so I will need to modify it anyway to have the full path.
<?php
namespace App\Filament\Pages;
use App\Models\Photo;
use Filament\Forms\Components\FileUpload;
use Filament\Pages\Page;
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Contracts\HasSchemas;
use Filament\Schemas\Schema;
use Livewire\Attributes\Url;
class VetPhoto extends Page implements HasSchemas
{
use InteractsWithSchemas;
#[Url]
public ?int $photoId = null;
protected string $view = 'filament.pages.vet-photo';
public Photo $photo;
public ?array $data = [];
public function mount(): void
{
$this->data['file'] = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfHlcmASZgNOAA0mtIwob78oSLwGP1PybjDQ&s';
}
public function form(Schema $schema): Schema
{
return $schema
->components([
FileUpload::make('file')->image(),
])
->statePath('data');
}
}
Solution
Fixed it:
<?php
namespace App\Filament\Pages;
use App\Models\Photo;
use Filament\Forms\Components\FileUpload;
use Filament\Pages\Page;
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Contracts\HasSchemas;
use Filament\Schemas\Schema;
use Livewire\Attributes\Url;
class VetPhoto extends Page implements HasSchemas
{
use InteractsWithSchemas;
#[Url]
public ?int $photoId = null;
protected string $view = 'filament.pages.vet-photo';
public Photo $photo;
public ?array $data = [];
public function mount(): void
{
$this->data['file'] = ['data/photos/mobile/204671357_1752175651.jpg'];
}
public function form(Schema $schema): Schema
{
return $schema
->components([
FileUpload::make('file')
->image()
->imageEditor()
->disk('s3'),
])
->statePath('data');
}
}
