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.)

2 Replies

krekas•12mo ago

first, check errors in the console

map1960OP•12mo ago

No errors. There's a warning: "Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (397440 px). Occurrences of will-change over the budget will be ignored." Not sure if that would cause the problem I'm having with imageEditor. But if I add the avatar() method to FileUpload, I do get an error, "Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource."

Gaming

Programming

ImageEditor on custom page