© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•3y ago•
1 reply
map1960

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.)
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources

Similar Threads

Was this page helpful?
Recent Announcements

Similar Threads

ImageEditor on custom page
FilamentFFilament / ❓┊help
3y ago
FileUpload imageEditor()
FilamentFFilament / ❓┊help
2y ago
Tab on custom page
FilamentFFilament / ❓┊help
2y ago
getTabs() on custom page?
FilamentFFilament / ❓┊help
2y ago