Filament•5mo ago

Change filament html element class definition dynamically

Hi. Check this SO post if possible: https://stackoverflow.com/questions/78803565/filament-add-extra-class-to-the-html-element-dynamically I have a FileElement and I would like to add a class to it dynamically based on some properties. For example, take this piece of code:

public static function makeImageFileUpload(
    string $name,
    string $directory = 'profiles/images',
    string $visibility = 'public',
): FileUpload {
    return FileUpload::make($name)
        ->image()
        ->imageEditor()
        ->imageEditorAspectRatios(['9:16'])
        ->disk($visibility)
        ->directory($directory)
        ->visibility($visibility)
        ->downloadable()
        ->openable()
        ->deletable()
        ->live()
        ->extraAttributes(function (FileUpload $component, Get $get) use ($name): array {
            $fileCount = $component->isMultiple() ? $component->getMaxFiles() : 1;
            Log::info($name, ['maxCount' => $fileCount, 'actualCount' => count($get($name))]);
            if ($fileCount === count($get($name))) {
                Log::info($name . ' hidden');
                return ['class' => 'file-upload-hidden'];
            } else {
                Log::info($name . ' visible');
                return ['class' => 'file-upload-visible'];
            }
        })
    ;
}

public static function makeImageFileUpload(
    string $name,
    string $directory = 'profiles/images',
    string $visibility = 'public',
): FileUpload {
    return FileUpload::make($name)
        ->image()
        ->imageEditor()
        ->imageEditorAspectRatios(['9:16'])
        ->disk($visibility)
        ->directory($directory)
        ->visibility($visibility)
        ->downloadable()
        ->openable()
        ->deletable()
        ->live()
        ->extraAttributes(function (FileUpload $component, Get $get) use ($name): array {
            $fileCount = $component->isMultiple() ? $component->getMaxFiles() : 1;
            Log::info($name, ['maxCount' => $fileCount, 'actualCount' => count($get($name))]);
            if ($fileCount === count($get($name))) {
                Log::info($name . ' hidden');
                return ['class' => 'file-upload-hidden'];
            } else {
                Log::info($name . ' visible');
                return ['class' => 'file-upload-visible'];
            }
        })
    ;
}

What happens is that the extraAttributes method gets invoked when I change the FileUpload data in the form, however it does not update. It initially renders with the class that matches the logic, but if that changes, it does not add/remove any other classes. It's like the class property of the html element is only set during the first render, and any other changes to it are ignored. Is there anything I could do about it?

Stack Overflow

Filament add extra class to the html element dynamically

I have a FileElement and I would like to add a class to it dynamically based on some properties. For example, take this piece of code: public static function makeImageFileUpload( string $name, ...

5 Replies

ștefOP•5mo ago

TOP for this, seems to have been completely ignored

Dennis Koch•5mo ago

Isn't this the static value of maximal allowed files? $component->getMaxFiles()

ștefOP•5mo ago

yes, getMaxFiles returns the maximum allowed files. Based on that, I want to show/hide some label within the component. The issue is that the class property does not get updated when I make changes such as uploading/delete a new file. The method gets called, I logged that, but the class does not get updated

Dennis Koch•5mo ago

$fileCount never changes. It's a static value. Ah count($get($name)) does. Overlooked it I guess it might be, that some part of the component is wire:ingored and therefore some parts never update. Not sure though. It logs different values ("visible"/"hidden") on upload, right?

ștefOP•5mo ago

Yes, the values logged are correct and what I would expect

Gaming

Programming

Change filament html element class definition dynamically