Filament•2y ago

SpatieMediaLibraryFileUpload show uploaded images

Hey! 👋 I want to use the Form Builder inside a Widget to upload images. The upload is working and my media files are stored on disk and in the media table. When i reload the page the uploaded images are gone. Storage path is linked and i have no console errors. The Field inside a Resource on the edit page it works. Any idea what i'm doing wrong?

<?php

namespace App\Filament\Widgets;

use App\Models\Page;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Widgets\Widget;
use Filament\Forms;

class LinkpageImages extends Widget implements HasForms
{
    use InteractsWithForms;

    protected static string $view = 'filament.widgets.linkpage-images';

    protected static ?string $pollingInterval = null;

    public $pages;

    public $images;

    public function mount(): void
    {
        $this->pages = Page::get();
    }

    protected function getFormSchema()
    {
        $fields = [];

        foreach ($this->pages as $page) {
            $fields[] = Forms\Components\SpatieMediaLibraryFileUpload::make('images')
                ->collection('background')
                ->model($page)
                ->image()
                ->maxSize(1024*3)
                ->required();
        }

        return [
            Forms\Components\Grid::make(2)
                ->schema($fields)
        ];
    }

    public function submit(): void
    {
        dd($this->form->getState());
    }
}

<?php

namespace App\Filament\Widgets;

use App\Models\Page;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Widgets\Widget;
use Filament\Forms;

class LinkpageImages extends Widget implements HasForms
{
    use InteractsWithForms;

    protected static string $view = 'filament.widgets.linkpage-images';

    protected static ?string $pollingInterval = null;

    public $pages;

    public $images;

    public function mount(): void
    {
        $this->pages = Page::get();
    }

    protected function getFormSchema()
    {
        $fields = [];

        foreach ($this->pages as $page) {
            $fields[] = Forms\Components\SpatieMediaLibraryFileUpload::make('images')
                ->collection('background')
                ->model($page)
                ->image()
                ->maxSize(1024*3)
                ->required();
        }

        return [
            Forms\Components\Grid::make(2)
                ->schema($fields)
        ];
    }

    public function submit(): void
    {
        dd($this->form->getState());
    }
}

3 Replies

DivDaxOP•2y ago

And here my Page.php:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Illuminate\Database\Eloquent\Relations\HasMany;
use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;
use Spatie\Sluggable\HasSlug;
use Spatie\Sluggable\SlugOptions;

class Page extends Model implements HasMedia
{
    use HasFactory;
    use InteractsWithMedia;
    use HasSlug;

    protected $guarded = ['id'];

    public function getSlugOptions() : SlugOptions
    {
        return SlugOptions::create()
            ->generateSlugsFrom('title')
            ->saveSlugsTo('slug');
    }

    public function registerMediaCollections(): void
    {
        $this->addMediaCollection('background')
            ->singleFile()
            ->registerMediaConversions(function (Media $media) {
                $this->addMediaConversion('thumb')
                    ->width(400);
                $this->addMediaConversion('lg')
                    ->width(2048);
            });;
    }
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Illuminate\Database\Eloquent\Relations\HasMany;
use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;
use Spatie\Sluggable\HasSlug;
use Spatie\Sluggable\SlugOptions;

class Page extends Model implements HasMedia
{
    use HasFactory;
    use InteractsWithMedia;
    use HasSlug;

    protected $guarded = ['id'];

    public function getSlugOptions() : SlugOptions
    {
        return SlugOptions::create()
            ->generateSlugsFrom('title')
            ->saveSlugsTo('slug');
    }

    public function registerMediaCollections(): void
    {
        $this->addMediaCollection('background')
            ->singleFile()
            ->registerMediaConversions(function (Media $media) {
                $this->addMediaConversion('thumb')
                    ->width(400);
                $this->addMediaConversion('lg')
                    ->width(2048);
            });;
    }
}

Dan Harrin•2y ago

to start with, you have multiple fields with the same name. this is a big nono the reason why its not filling is because youre not calling $this->form->fill([]) you dont need to pass anything but an empty array, but not calling it at all will mean nothing is filled

DivDaxOP•2y ago

Thank you Dan! Perfect instructions - now it works! 🙏

Gaming

Programming

SpatieMediaLibraryFileUpload show uploaded images