Filament•7mo ago

Re-render FileUpload Component

I have a scenario where I have a select component with a few options, when a user selects an option from the select component I'm conditionally showing and updating the FileUpload component. IE. to use the circleCropper or not, dimensions of the image being cropped etc. However, when I change my selection I have no way of rerendering the FileUpload component in order for it to render with the updated dimensions, etc. from the selection they chose. Is there a way to re-render a component or update its state?

Solution:

the only idea i have is something like ->extraFieldWrapperAttributes(fn ($get) => ['wire:key' => $get('shop_product_id') . '-file-upload'])

Jump to solution

9 Replies

Dennis Koch•7mo ago

You need live() and closure customization

jay3ebOP•7mo ago

Thanks @Dennis Koch , for more context this is what I have currently.

Select::make('shop_product_id')
                    ->label('Choose a preset')
                    ->options(Product::whereNotNull('published_at')->orderBy('id')->pluck('name', 'id'))
                    ->live()
                    ->helperText('All dimensions for presets are in millimeters.')
                    ->required(),
                FileUpload::make('image')
                    ->image()
                    ->imageEditor()
                    ->circleCropper(fn(Get $get) => $this->getProductShape($get('shop_product_id')))
                    ->imagePreviewHeight('400')
                    ->maxSize(1024 * 1025 * 5)
                    ->dehydrateStateUsing(function ($state) {
                        $files = array_values($state ?? []);

                        return end($files);
                    })
                    ->hidden(fn(Get $get) => $get('shop_product_id') === null)
                    ->imageEditorMode(1)
                    ->imageCropAspectRatio(
                        function (Get $get) {
                            $product = Product::find($get('shop_product_id'));
                            if ($product) {
                                return "{$product->width}:{$product->height}";
                            } else {
                                // Return a default value or throw an exception
                                return "0:0"; // Default value
                                // throw new Exception('Product not found'); // Exception
                            }
                        }
                    )
                    ->disk('s3')
                    ->directory('livewire-temp')
                    ->visibility('public'),

Select::make('shop_product_id')
                    ->label('Choose a preset')
                    ->options(Product::whereNotNull('published_at')->orderBy('id')->pluck('name', 'id'))
                    ->live()
                    ->helperText('All dimensions for presets are in millimeters.')
                    ->required(),
                FileUpload::make('image')
                    ->image()
                    ->imageEditor()
                    ->circleCropper(fn(Get $get) => $this->getProductShape($get('shop_product_id')))
                    ->imagePreviewHeight('400')
                    ->maxSize(1024 * 1025 * 5)
                    ->dehydrateStateUsing(function ($state) {
                        $files = array_values($state ?? []);

                        return end($files);
                    })
                    ->hidden(fn(Get $get) => $get('shop_product_id') === null)
                    ->imageEditorMode(1)
                    ->imageCropAspectRatio(
                        function (Get $get) {
                            $product = Product::find($get('shop_product_id'));
                            if ($product) {
                                return "{$product->width}:{$product->height}";
                            } else {
                                // Return a default value or throw an exception
                                return "0:0"; // Default value
                                // throw new Exception('Product not found'); // Exception
                            }
                        }
                    )
                    ->disk('s3')
                    ->directory('livewire-temp')
                    ->visibility('public'),

Dennis Koch•7mo ago

Hm. Might not work because FilePond is not reinitialized. I don’t have an idea sorry.

jay3ebOP•7mo ago

Hmm, ok thanks for looking into it. Been working on it for days... @Dan Harrin , do you have any ideas on how I can re-render or update the state the FileUpload component when the shop_product_id changes?

Solution

Dan Harrin•7mo ago

the only idea i have is something like ->extraFieldWrapperAttributes(fn ($get) => ['wire:key' => $get('shop_product_id') . '-file-upload'])

jay3ebOP•7mo ago

@Dan Harrin , I was able to use ->extraAttributes(fn($get) => ['wire:key' => $get('shop_product_id') . '-file-upload']) and that was exactly what I needed. Thanks a ton on this suggestion!

Dan Harrin•7mo ago

do you need it explaining how it works or do you get it

jay3ebOP•7mo ago

I found a write up on it in the docs, all set.

gilchrist9889•2mo ago

How to do the same with @MohamedSabil83 tiny-editor plugin. TinyEditor::make('description') ->required() ->columnSpanFull() ->label('Description') ->extraAttributes(fn ($get) => ['wire:key' => $get('gender') . '-description']) , I tried the same, it's not working as expected. Please help.

Gaming

Programming

Re-render FileUpload Component