Filament•2mo ago

FileUpload EditPage preview from external url

I have an "image" column on my model with an array of images urls. I would to show a preview of them on the EditFrom using the FileUpload. Any idea on how? This is my current field config:

Forms\Components\FileUpload::make('images')
  ->image()
  ->multiple()
  ->preserveFilenames()
  ->imagePreviewHeight('250')
  ->loadingIndicatorPosition('left')
  ->panelAspectRatio('2:1')
  ->panelLayout('grid')
  ->removeUploadedFileButtonPosition('right')
  ->uploadButtonPosition('left')
  ->uploadProgressIndicatorPosition('left')

Forms\Components\FileUpload::make('images')
  ->image()
  ->multiple()
  ->preserveFilenames()
  ->imagePreviewHeight('250')
  ->loadingIndicatorPosition('left')
  ->panelAspectRatio('2:1')
  ->panelLayout('grid')
  ->removeUploadedFileButtonPosition('right')
  ->uploadButtonPosition('left')
  ->uploadProgressIndicatorPosition('left')

this is the state() for "images": [ 0 => "https: //www.teammakerplus.com/wp-content/uploads/2024/04/46205-2 .jpg" 1 => "https: //www.teammakerplus.com/wp-content/uploads/2024/04/issaline-46205-1 .jpg" 2 => "https: //www.teammakerplus.com/wp-content/uploads/2024/04/issaline-46205-2 .jpg" 3 => "https: //www.teammakerplus.com/wp-content/uploads/2024/04/issaline-46205-3 .jpg" ] (the space is for it not to load the image on the chat. The url on the app its correct 😉 ) Thanks in advance.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

FileUpload EditPage preview from external url