Filament•12mo ago

ImageEditor on custom page

Is it possible to use the imageEditor method on a FileUpload field in a custom livewire component? I've created a custom livewire component to let users upload an avatar image on the standard breeze profile page, in the public area of my app. The simple filepond field works fine. If I add "imageEditor()" to the FileUpload field, the editor does appear, but the layout is messed up, with the editing fields displayed below the image instead of to the right, and the save button hidden. The avatar() method also seems to break the field. Are certain methods only available within the Filament panel and unavailable in custom livewire components? Or am I doing something wrong? I'm using Laravel 10.39, Filament 3.1.32, Livewire 3.3.3. Here's the code for my form:

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                FileUpload::make('avatar')
                ->image()
                ->imageEditor()
                ->disk('public')
                ->directory('avatars')
            ])
            ->statePath('data');
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                FileUpload::make('avatar')
                ->image()
                ->imageEditor()
                ->disk('public')
                ->directory('avatars')
            ])
            ->statePath('data');
    }

Thank you! (I'm pretty new to Filament and this is my first post here, so apologies in advance if I've missed something obvious.)

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

ImageEditor on custom page