Question 384377 in Laravel Question posted in
The official Laravel Documentation can be found here.

Add image in Laravel/Filament form

I’m trying to build a wizard form in Filament. It has 2 steps:

  1. First, an user need to specify some product number.
  2. After that script gets some info including image url from other site by api. I want a respective image to be displayed on this step. As a result the user should confirm that it’s a product he needs.

And now I don’t understand how to display the image in this form. It’s not a file uploader. It’s just an image.

As I understand, it can be done via ViewField. But don’t understand how to specify that it should be some Image component and how to pass an url there in afterValidation on the first step. Please, help.

    public function getSteps(): array
    {
        return [
            Step::make('Product ID')
                ->description('Write a product id you want')
                ->schema([
                    TextInput::make('product_id')
                        ->required()
                        ->reactive()
                ])
                ->afterValidation(function(Get $get, Set $set){
                    $id = $get('product_id');
                    $product_image_url = Product::get_image_url($id);
                    $set('product_image', $product_image_url);
                }),
            Step::make('Confirmation')
                ->description('Check a product one more time and confirm you want it')
                ->schema([
                    ViewField::make('product_image')
                       ...............
                       ...............
                ]),
Tags:

2

Answers


  1. 0

    My first attempt would be as follows:

    • Add the live() directive, perhaps with a debounce, to the product_id field. This will render the entire form again upon changing the value of that field. So, when a product is selected, all the fields are rendered again.
    • In your view, make sure that you have access to the Get class, or the current form state in any way, so you can retrieve the selected product ID. Use PHP inside your view to retrieve the image and use it as a source for your HTML image element.

    If that doesn’t make for a solution, here’s an alternative route:

    • Add a hidden field for the product image URL
    • In your ViewField’s view, add an image element with a placeholder source
    • Use JS to update the image element’s src attribute whenever the hidden fields value changes.
    Login or Signup to reply.
  2. 0

    After messing about for a while, I needed a similar functionality. You can simply display the image in a Placeholder:

    Placeholder::make('Image')
   ->content(function ($record): HtmlString {
      return new HtmlString("<img src= '" . $record->URL . "')>");
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search