Filament•7d ago

FileUpload does not fully initialise in collapsed Form Repeater/Builder on edit

When using collapsed Repeater or Builder and when editing items, the FileUpload would not fully initialise. I have 4 items in the repeater; The page loads with all these items collapsed. I expand random item - the image upload field is correctly initialised with image, delete button etc. I then open second item - the image loads, but the Drag & Drop your files or Browse message is showing on top of the image and delete button prompts to upload a new file. When new file is uploaded - both newly uploaded and previously uploaded images get deleted. This does not happen if Repeater is not collapsed by default. Any ideas what trickery I could invoke to make the FileUpload reinit properly on expanding the repeater/builder section?

public ?array $data = [];

public function mount(): void
{
    $icons = $this->airline->design->social_icons;
    $this->form->fill([
        'social_icons' => $icons
    ]);
}

public function form(Form $form): Form
{
    return $form
        ->statePath('data')
        ->schema([
            Section::make('Social Icons')
                ->schema([
                    Repeater::make('social_icons')->label('Social Icons')->schema([
                        FileUpload::make('image')->visibility('public')->disk('do_spaces')->directory('social_images')->image()
                            ->helperText('We strongly urge the size of 200 by 50 pixels')
                            ->required(),
                        FileUpload::make('image_dark')->visibility('public')->label('Image - Dark Mode')
                            ->hint('Optional, displayed in dark mode. If missing - regular image will be shown.')
                            ->disk('do_spaces')->directory('social_images')->image()
                            ->helperText('We strongly urge the size of 200 by 50 pixels')
                    ])
                        ->columns(2)
                        ->itemLabel(fn(array $state): ?string => $state['name'] ?? null)
                        ->addActionLabel('Add Icon')
                        ->collapsed(),
                ]),
        ]);
}

public ?array $data = [];

public function mount(): void
{
    $icons = $this->airline->design->social_icons;
    $this->form->fill([
        'social_icons' => $icons
    ]);
}

public function form(Form $form): Form
{
    return $form
        ->statePath('data')
        ->schema([
            Section::make('Social Icons')
                ->schema([
                    Repeater::make('social_icons')->label('Social Icons')->schema([
                        FileUpload::make('image')->visibility('public')->disk('do_spaces')->directory('social_images')->image()
                            ->helperText('We strongly urge the size of 200 by 50 pixels')
                            ->required(),
                        FileUpload::make('image_dark')->visibility('public')->label('Image - Dark Mode')
                            ->hint('Optional, displayed in dark mode. If missing - regular image will be shown.')
                            ->disk('do_spaces')->directory('social_images')->image()
                            ->helperText('We strongly urge the size of 200 by 50 pixels')
                    ])
                        ->columns(2)
                        ->itemLabel(fn(array $state): ?string => $state['name'] ?? null)
                        ->addActionLabel('Add Icon')
                        ->collapsed(),
                ]),
        ]);
}

2 Replies

Lukas JankauskasOP•7d ago

Item in second repeater entry vs first

Lukas JankauskasOP•5d ago

Bump in case anyone has any thoughts?

Gaming

Programming

FileUpload does not fully initialise in collapsed Form Repeater/Builder on edit