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
foreach() argument must be of type array|object, string given - is this normal?
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.
<?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');
}
}
2 Replies
Just noticed this in the docs:
To correctly preview images and other files, FilePond requires files to be served from the same domain as the app, or the appropriate CORS headers need to be present. Ensure that the APP_URL environment variable is correct, or modify the filesystem driver to set the correct URL. If you’re hosting files on a separate domain like S3, ensure that CORS headers are set up.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');
}
}