Filament•11mo ago

Using SpatieMediaLibraryFileUpload in form tabs

When I try to add the SpatieMediaLibraryFileUpload form component to a Filament\Forms\Components\Tabs\Tab component I get the following error: "Filament\Forms\Components\SpatieMediaLibraryFileUpload::Filament\Forms\Components{closure}(): Argument #2 ($file) must be of type string, array given". Can anyone help me with this? Here is the full code I'm trying to implement:

Tabs::make('Media')
  ->tabs([
      Tabs\Tab::make('Upload')
          ->schema([
              SpatieMediaLibraryFileUpload::make('media')
                  ->label('')
                  ->openable()
                  ->preserveFilenames()
                  ->imageEditor()
                  ->customProperties(['caption' => 'my caption'])
                  ->getUploadedFileNameForStorageUsing(function (TemporaryUploadedFile $file): string {
                      return str($file->getClientOriginalName())->prepend(now()->timestamp);
                  })
                  ->multiple()
                  ->panelLayout('grid')
                  ->reorderable()
          ]),
      Tabs\Tab::make('Meta')
          ->schema([
              Repeater::make('media')
                  ->relationship()
                  ->schema([
                      TextInput::make('custom_properties.caption'),
                      KeyValue::make('custom_properties'),
                      ViewField::make('file_name')
                          ->label('File')
                          ->view('filament.forms.components.media')
                  ]),
          ]),
      ])

Tabs::make('Media')
  ->tabs([
      Tabs\Tab::make('Upload')
          ->schema([
              SpatieMediaLibraryFileUpload::make('media')
                  ->label('')
                  ->openable()
                  ->preserveFilenames()
                  ->imageEditor()
                  ->customProperties(['caption' => 'my caption'])
                  ->getUploadedFileNameForStorageUsing(function (TemporaryUploadedFile $file): string {
                      return str($file->getClientOriginalName())->prepend(now()->timestamp);
                  })
                  ->multiple()
                  ->panelLayout('grid')
                  ->reorderable()
          ]),
      Tabs\Tab::make('Meta')
          ->schema([
              Repeater::make('media')
                  ->relationship()
                  ->schema([
                      TextInput::make('custom_properties.caption'),
                      KeyValue::make('custom_properties'),
                      ViewField::make('file_name')
                          ->label('File')
                          ->view('filament.forms.components.media')
                  ]),
          ]),
      ])

2 Replies

svenOP•11mo ago

Anyone an idea?

DrByte•11mo ago

I haven't used it inside a Tab. But I find myself wondering: if you move it out of the tab, does it work correctly?

Gaming

Programming

Using SpatieMediaLibraryFileUpload in form tabs