Filament•2mo ago

Dynamic Repeater based on FileUpload->multiple() files

Hi everyone! I’m working on a feature in Filament where I’d like to create a repeater that contains basic metadata fields like title and description. The repeater should automatically generate entries based on the number of files uploaded in a FileUploader field (one entry per file). Here’s an example of the schema I’m currently working with:

public static function form(Form $form): Form
{
    return $form
        ->schema([

            Section::make(__('Media upload'))
                ->schema([
                    FileUpload::make('filepath')
                        ->label(__('Media'))
                        ->disk('public')
                        ->directory('media')
                        ->required()
                        ->multiple()
                ]),

            Section::make(__('Media details'))
                ->schema([
                    Repeater::make('media_metadata')
                        ->schema([                                   
                              Grid::make()
                                  ->schema([
                                      TextInput::make('title')
                                          ->label(__('Title'))
                                          ->required(),
                                          
                                      Textarea::make('description')
                                          ->label(__('Description'))
                                  ])
                                  ->columns(2)
                        ])
                        ->defaultItems(0)
                        ->reorderable(false)
                        ->deletable(false)
                        ->addable(false)
                ]),
        ]);
}

public static function form(Form $form): Form
{
    return $form
        ->schema([

            Section::make(__('Media upload'))
                ->schema([
                    FileUpload::make('filepath')
                        ->label(__('Media'))
                        ->disk('public')
                        ->directory('media')
                        ->required()
                        ->multiple()
                ]),

            Section::make(__('Media details'))
                ->schema([
                    Repeater::make('media_metadata')
                        ->schema([                                   
                              Grid::make()
                                  ->schema([
                                      TextInput::make('title')
                                          ->label(__('Title'))
                                          ->required(),
                                          
                                      Textarea::make('description')
                                          ->label(__('Description'))
                                  ])
                                  ->columns(2)
                        ])
                        ->defaultItems(0)
                        ->reorderable(false)
                        ->deletable(false)
                        ->addable(false)
                ]),
        ]);
}

Is there a simple or recommended way to achieve this? Ideally, the repeater field would also update dynamically if files are added or removed from the FileUpload field... Thanks in advance for your help!

3 Replies

Povilas K•2mo ago

@steexd what if you change the idea and create a repeater with FileUpload INSIDE the repeater and single file for each row? isn't it what you actually want: one set of data for each file, and ability to add/remove files?

steexdOP•2mo ago

Thank you for the suggestion, but I think it might become cumbersome for the average user (imagine managing collections of 40 or 50 files—selecting one file at a time could be tedious)… What I’m looking for is a faster and more user-friendly solution, so my idea was to have a FileUpload field that supports multiple uploads and, once the upload is complete, automatically generates a repeater row for each uploaded file. Alternatively I was thinking of something like a “dummy component” that accepts the files drop and automatically generates the repeaters with the corresponding fields (FileUpload with single file, TextInput name, etc). Do you have any other suggestions on how to implement something similar? Thanks a lot!

Povilas K•2mo ago

No unfortunately I don't have suggestion on this, I guess if someone uploads 40-50 files and would receive a massive repeater on the screen, it wouldn't be a good UX either, in my opinion. Maybe a better experience would be some kind of wizard, or even submitting the form with files right away and then show releater in the EDIT form or something

Gaming

Programming

Dynamic Repeater based on FileUpload->multiple() files