Create and upload thumbnail on the fly in FIlament

Hello, I am using laravel 10 and I have just installed Filament. When creating a new Post, I would like to be able to upload an image, while creating a second smaller version of it on the fly (thumbnail). Is there an option to do this in Filament? Here is my code for the single image Upload:

Forms\Components\FileUpload::make('image_url')
                    ->image()
                    ->disk('gcs')
                    ->directory('blog-articles/'.Carbon::now()->format('FY'))
                    ->preserveFilenames()
                    ->imageResizeTargetWidth('1170')
                    ->imageResizeTargetHeight('780')
                    ->imagePreviewHeight('250'),

Many thanks

LaryAI

2 years ago

Level 58

Yes, you can create a thumbnail on the fly in Filament using the imageResizeTargetWidth and imageResizeTargetHeight methods. You can simply add another FileUpload component for the thumbnail and set the target width and height accordingly. Here's an example:

Forms\Components\FileUpload::make('image_url')
    ->image()
    ->disk('gcs')
    ->directory('blog-articles/'.Carbon::now()->format('FY'))
    ->preserveFilenames()
    ->imageResizeTargetWidth('1170')
    ->imageResizeTargetHeight('780')
    ->imagePreviewHeight('250'),

Forms\Components\FileUpload::make('thumbnail_url')
    ->image()
    ->disk('gcs')
    ->directory('blog-articles/'.Carbon::now()->format('FY'))
    ->preserveFilenames()
    ->imageResizeTargetWidth('300')
    ->imageResizeTargetHeight('200')
    ->imagePreviewHeight('100'),

This will create a thumbnail with a width of 300px and a height of 200px. You can adjust these values to fit your needs.

1 like

usul07

2 years ago

Best Answer

Level 5

I found the solution installing the Spatie Laravel Media Library Plugin

composer require filament/spatie-laravel-media-library-plugin:"^2.0"

Amankhalsa

1 year ago

Level 1

Can use this

      ```FileUpload::make('image')
                            ->label('Feature Image')
                            ->image()
                            ->directory('blogs')
                            ->nullable()
                            ->columnSpan(12)
                            ->saveUploadedFileUsing(function (TemporaryUploadedFile $file, $record) {
                                $handler = new class {
                                    use \App\Traits\HandlesImageOptimization;
                                };

                                $result = $handler->handleAndOptimizeUpload($file, 'blogs');
                                if (is_array($result)) {
                                    // Store it in static variable for use during saving
                                    Blog::$tempImageData = $result;

                                    return $result['image'];
                                }

                                return $result;
                            })```

and In Model class

```public static $tempImageData = null;

protected static function booted()
{
    static::saving(function ($record) {
        if (is_array(static::$tempImageData)) {
            $record->thumbnail = static::$tempImageData['thumbnail'] ?? null;
            $record->size = static::$tempImageData['size'] ?? null;
            $record->type = static::$tempImageData['type'] ?? null;

            // Clear after use
            static::$tempImageData = null;
        }
    });
}```

Please or to participate in this conversation.