F
Filament•4w ago
Georgi Arnaudov

Spatie Media Library blurred image preview

What I am trying to do: Preview successfully uploaded image/s What I did: I've upgraded filament admin panel to v3, more specifically ^3.2 . Along with it I've updated "filament/spatie-laravel-media-library-plugin": "^3.2". My theme compiles correctly and everything else worked like a charm. My issue: The uploaded image/s are blurred, or the entire preview is cut out. The bug where the whole preview is cut out appears when I reload the page, visit some other tabs and then open the images tab. Code: Product model 
public function registerMediaCollections(): void
    {
        $this
            ->addMediaCollection('products')
            ->useDisk('products');
    }

    public function registerMediaConversions(?Media $media = null): void
    {
        $this->addMediaConversion('thumb')
            ->width(240)
            ->height(270);

        $this->addMediaConversion('medium')
            ->width(400);
    }
public function registerMediaCollections(): void
    {
        $this
            ->addMediaCollection('products')
            ->useDisk('products');
    }

    public function registerMediaConversions(?Media $media = null): void
    {
        $this->addMediaConversion('thumb')
            ->width(240)
            ->height(270);

        $this->addMediaConversion('medium')
            ->width(400);
    }
Product resource: 
Tabs\Tab::make('Снимки')
    ->schema([
        SpatieMediaLibraryFileUpload::make('media')
            ->collection('products')
            ->disk('products')
            ->multiple()
            ->image()
            ->maxFiles(10)
            ->hiddenLabel()
    ]),
Tabs\Tab::make('Снимки')
    ->schema([
        SpatieMediaLibraryFileUpload::make('media')
            ->collection('products')
            ->disk('products')
            ->multiple()
            ->image()
            ->maxFiles(10)
            ->hiddenLabel()
    ]),
No description
No description
4 Replies
Azad Furkan ŞAKAR
Azad Furkan ŞAKAR•4w ago
This is a known issue for a long time. Probably it's beacuse of Livewire and/or Filepond. If you use FileUpload or SpatieMediaLibraryFileUpload component in Tab, Repeater or Section component with collapsed method this is expected problem
Georgi Arnaudov
Georgi ArnaudovOP•4w ago
Thanks for confirming! I thought it was something on my side.
gigo6000
gigo6000•2w ago
I'm having the same issue is there any workaround for this? I've tried different things but nothing seems to work. The only thing that works is having the file upload field in the first tab/step
Georgi Arnaudov
Georgi ArnaudovOP•5d ago
Nothing seems to work, except the workaround you're currently doing.

Did you find this page helpful?