How can I get live preview image with custom ui in filament?
How can I get live preview image with custom ui in filament?
for example, I have 2 layout section and FileUpload::make('image') is from first section and if upload this image I want to preview in second section live preview for this image.
2 Replies
I am not sure whether you can access the temporary file. Try getting the data via
fn($get) => $get('image') or fn ($livewire) => $livewire->data.I can confirm when you use $get it will return TemporaryUploadedFile objects.
One thing to keep in mind is by by images are stored in a private directory (defined in your livewire temporary directory config) and then the TemporaryUploadedFile class generates temporary signed urls to display these, if you try to access the images directly it wont work you need to use the temporarysigned urls as well.
Also I think perhaps a more efficient way would be to use ->afterStateUpdated method on the fileupload component it self with $set to set the (this way I think you can avoid making it live). (The set for the fileupload takes a url string or array of strings)
I think you can also do this with pure alpine.js rather than livewire to avoid the server round trip but don't want to overcomplicate things