Laravel filament dependant field empty

by

I have one database column that I want to dynamically be a FileUpload or a TextInput. The TextInput however, is always empty. If I remove the FileUpload the TextInput is filled.

return $form
            ->schema([
                Select::make('type')
                    ->options(['image' => 'image', 'link' => 'link'])
                    ->default('image')
                    ->required()
                    ->reactive(),
                FileUpload::make('link')
                    ->reactive()
                    ->image()
                    ->disk('s3')
                    ->directory(function (RelationManager $livewire): string {
                        return ProductMediaService::getUploadDirectory($livewire->ownerRecord);
                    })
                    ->getUploadedFileNameForStorageUsing(function (TemporaryUploadedFile $file, RelationManager $livewire): string {
                        return ProductMediaService::getFileName($livewire->ownerRecord, $file->getClientOriginalExtension());
                    })
                    ->when(fn (Closure $get) => $get('type') === 'image'),
                TextInput::make('link')
                    ->reactive()
                    ->afterStateHydrated(function (TextInput $component, $state) {
                        $component->state($state);
                    })
                    ->when(fn (Closure $get) => $get('type') === 'link'),
                TextInput::make('title'),
                TextInput::make('subtitle'),
                TextInput::make('source'),
                Toggle::make('is_logo'),
                Toggle::make('is_cover'),

Tried different versions of when() like hidden(), also did not work.

Anyone an idea how I can do it differently?

  • Show type checkbox or toggle also.. and which version you’re using?

    – 

  • @Vpa Version = 2.17.53 What do you mean with “Show type checkbox or toggle also”?

    – 




  • You have $get('type') and show ToggleOrCheckbox::make('type') don’t how to put a word for this

    – 

  • Show components where you use make('type') I think components word is correct 🙂

    – 

  • Ahhh sorry, no it is correct, and it works, it switches between Upload and Input, the upload works perfectly, the Input is just empty (while there is a value). Edited the post with full code.

    – 




Try like this, but it may not work 🙂 IIRC they need to have dynamic make('dynamic')

Select::make('type')
    ->options(['image' => 'image', 'link' => 'link'])
    ->default('image')
    ->required()
    ->reactive(),
    
FileUpload::make('link')
    // ->reactive() // no need unless you want something to change after file uploaded
    ->image()
    ->disk('s3')
    ->directory(function (RelationManager $livewire): string {
        return ProductMediaService::getUploadDirectory($livewire->ownerRecord);
    })
    ->getUploadedFileNameForStorageUsing(function (TemporaryUploadedFile $file, RelationManager $livewire): string {
        return ProductMediaService::getFileName($livewire->ownerRecord, $file->getClientOriginalExtension());
    })
    ->when(fn (Closure $get) => $get('type') === 'image'),

TextInput::make('link')
    // ->reactive() // no need unless you want to change something after text entered
    // Below part are not require imo if your table is set up correctly
    // ->afterStateHydrated(function (TextInput $component, $state) {
    //    $component->state($state);
    // })
    ->when(fn (Closure $get) => $get('type') === 'link'),

I would suggest to have different column like image and link with nullable() and call like

FileUpload::make('image'),

TextInput::make('link'),

Leave a Comment