Filament•11mo ago

Repeater with Fileupload doesn't update previews on using $set

Hi all. I am using a Filament repeater with 3 field. 2 Textinputs and 1 Fileupload. I am using another fileupload to fetch multiple images then make a repeater field based on number of images so that description can be added to each of the image. When I use $set to dynamically update my repeater, the data is there but no preview is shown by file upload it just shows original UI to select a file. Is there a better way to do this?

6 Replies

awcodes•11mo ago

Can you share your set function?

tinkypinkyOP•11mo ago

Forms\Components\FileUpload::make('temp_images')->multiple()->image()->dehydrated(false),
                Forms\Components\Actions::make([
                    Action::make('copy_images')->action(function ($get, $set) {
                        $rep_data = [];
                        $images = $get('temp_images');
                        foreach ($images as $key => $image) {
                            $rep_data[] = [
                                'photo_type' => '',
                                'photo_description' => '',
                                'photo_url' => [$key => $image]
                            ];
                        }
                        $set('temp_images',[]);
                        $set('images',$rep_data);
                    })
                ]),
                Repeater::make('images')
                    ->statePath('images')
                    ->addActionLabel('Add Photo')
                    ->reorderable()
                    ->columns(3)
                    ->columnSpanFull()
                    ->schema([
                        Select::make('photo_type')->label('Photo Type')
                            ->options(['Exterior' => 'Exterior', 'Interior' => 'Interior', 'Roof' => 'Roof', 'Neighborhood' => 'Neighborhood', 'Routine Maintenance' => 'Routine Maintenance', 'Deferred Maintenance' => 'Deferred Maintenance', 'Life Safety' => 'Life Safety']),
                        Textarea::make('photo_description')->label('Photo Description'),
                        Forms\Components\FileUpload::make('photo_url')->label('Photo')->deletable(false)
                    ])

Forms\Components\FileUpload::make('temp_images')->multiple()->image()->dehydrated(false),
                Forms\Components\Actions::make([
                    Action::make('copy_images')->action(function ($get, $set) {
                        $rep_data = [];
                        $images = $get('temp_images');
                        foreach ($images as $key => $image) {
                            $rep_data[] = [
                                'photo_type' => '',
                                'photo_description' => '',
                                'photo_url' => [$key => $image]
                            ];
                        }
                        $set('temp_images',[]);
                        $set('images',$rep_data);
                    })
                ]),
                Repeater::make('images')
                    ->statePath('images')
                    ->addActionLabel('Add Photo')
                    ->reorderable()
                    ->columns(3)
                    ->columnSpanFull()
                    ->schema([
                        Select::make('photo_type')->label('Photo Type')
                            ->options(['Exterior' => 'Exterior', 'Interior' => 'Interior', 'Roof' => 'Roof', 'Neighborhood' => 'Neighborhood', 'Routine Maintenance' => 'Routine Maintenance', 'Deferred Maintenance' => 'Deferred Maintenance', 'Life Safety' => 'Life Safety']),
                        Textarea::make('photo_description')->label('Photo Description'),
                        Forms\Components\FileUpload::make('photo_url')->label('Photo')->deletable(false)
                    ])

The data is getting copied properly and even saved on clicking create button and loaded when edit page opens after saving model with preview correctly. Only issue is not showing after using $set to end-user.

awcodes•11mo ago

Images needs to be an array of arrays Looks like you might be doing that though. What if you remove statePath from the images repeater? That’ll be the default from the make(). Maybe it’s creating a path of images.images Something feels off about this to me though since the image paths are temp URLs until the form is saved.

tinkypinkyOP•11mo ago

These $images is an array of $key and TemporaryUploadFile Instances Should I save files before copying to other field? The Path is correct as other fields and even this one are getting copied properly. Only issue is previewing. They are not just URLs, they are instances of TemporaryFileUpload

awcodes•11mo ago

I know. But that is still a path. It’s just path to livewire-tmp instead of the final destination path on save. I’m wondering if the uuid is getting changed using set resulting in an invalid mapping to the temporary file. Is there a reason to go through this trouble vs just uploading an image to each repeater item, since the items don’t necessarily always have the same number of items? I’m also not seeing a ->live() on any of the fields so the the repeater will never get updated “in real time”

tinkypinkyOP•11mo ago

Actually the user wants to upload say 20 files at the same time but then after uploading needs to enter the other two fields for each of the image. Is there an alternate way to do this? If I save files in action and then send them to repeater, previews are loading correctly But the issue is, in this case the user may navigate away without saving model and files will be there. How to handle this?

Gaming

Programming

Repeater with Fileupload doesn't update previews on using $set