Filament•16mo ago

Customize ImageEditor to allow drawing

I want to customize the image editor to be able to draw on the image. Looking at what is in the Filament package, I'm pretty sure it is not really extendable and my Alpine experience isn't amazing. Any tips on how to get in there and change the popup to my own functionality ?

18 Replies

awcodes•16mo ago

Create you own custom field. That’s going to be your best bet to override Filepond with additional extensions.

F alkoOP•16mo ago

Is there any easy way to extend the default file field to not lose too much of its functionality?

awcodes•16mo ago

No, because all the filepond scripts and extensions are bundled into an alpine component. You can copy everything you need from vendor though as a place to get started. And filepond, to my knowledge, doesn’t have a way to plug in extra extension in on the fly.

F alkoOP•16mo ago

So I got this local JS file now, but I want to register it as an Alpine component such as:

FilamentAsset::register([
    AlpineComponent::make(
        'image-with-draw',
        Vite::asset('resources/js/components/image-with-draw.js'),
    ),
]);

FilamentAsset::register([
    AlpineComponent::make(
        'image-with-draw',
        Vite::asset('resources/js/components/image-with-draw.js'),
    ),
]);

Yet it is not registering, what am I missing?

awcodes•16mo ago

Sorry. I’d have to really see the whole thing and all the files. This is possible but you’ll need to do a little digging on your own to get it all to work together. It’s going to hard for me to do spot check on a custom form field and alpine component.

F alkoOP•16mo ago

Are there any examples building anything like this available? The documentations is stops a basic bindings. I'd love to extract my code from a script tag into a Typescript file that is processed by Vite.

awcodes•16mo ago

To my knowledge. Nothing at at moment. And you should be able to. Personally I’ve never used typescript with an alpine component though. So I’d be less than helpful in that regard.

F alkoOP•16mo ago

Thanks for your quick responses tho! For now, getting it working with js would be enough

awcodes•16mo ago

Hopefully as Filament gets bigger there will be more content around things like advanced custom fields etc.

F alkoOP•16mo ago

I will try to make some documentation about this as soon as I figured it out

awcodes•16mo ago

Have a look at the FileUpload js component. The FileUpload class. And the FileUpload blade view on GitHub. That’ll get you started. They are in the forms package. Then look at the Asset Manager under core concepts in the docs to see how to register your component’s js.

F alkoOP•16mo ago

I found them, I already have an idea on how to get this working, but Alpine component is not being found. Probably because FilamentAsset::register is not available outside Filament itself.

awcodes•16mo ago

It is available in standalone too.

F alkoOP•16mo ago

Ohh it is. Thanks I hadn't found that documentation yet.

awcodes•16mo ago

Just have to call it in a service provider instead of a panel.

F alkoOP•16mo ago

Ahh, I had to add the ax-load-src to the component! Now it tries to load it, but it doesn't work with the vite hmr 🥲

awcodes•16mo ago

Boo. At least it’s loading and you can refresh to get changes.

F alkoOP•16mo ago

Throwing it into a js file thats always loaded does the trick for now Hope more documation becomes available in the near future 😁

Gaming

Programming

Customize ImageEditor to allow drawing