Filament•11mo ago

Searching for an image cropper editor compatible with v2

im trying to find an image cropper form component compatible with filament v2 ive tried: https://v2.filamentphp.com/plugins/image-cropper and https://v2.filamentphp.com/plugins/croppie they just dont work what would u do? (i'd migrate to v3 too but i cant in this project (yet ;)) what alternatives do i have?

11 Replies

ericmpOP•11mo ago

anyone ^^ ?

awcodes•11mo ago

fork one of those plugins and fix the errors. or write your own image cropper plugin. that's really all you can do.

ericmpOP•11mo ago

thank u. but im kinda lost on how to solve them. ill try to dig in how to fix them

awcodes•11mo ago

What are the errors you’re seeing?

ericmpOP•11mo ago

https://discord.com/channels/883083792112300104/1201529324562550864/1201536856798531616 basically imagecropper is not defined linked it to the thread cuz there i did upload an img

awcodes•11mo ago

looking at the code it should be fine. are you manually initializing Alpine in your app.js?

ericmpOP•11mo ago

yes, full file:

import Alpine from 'alpinejs'
import Focus from '@alpinejs/focus'
import FormsAlpinePlugin from '../../vendor/filament/forms/dist/module.esm'
import NotificationsAlpinePlugin from '../../vendor/filament/notifications/dist/module.esm'
import Tooltip from '@ryangjchandler/alpine-tooltip'
import 'tippy.js/dist/tippy.css' // optional for styling tooltip

Alpine.plugin(Focus)
Alpine.plugin(FormsAlpinePlugin)
Alpine.plugin(NotificationsAlpinePlugin)
Alpine.plugin(Tooltip)

window.Alpine = Alpine

Alpine.start()

import "../css/app.css"

import Alpine from 'alpinejs'
import Focus from '@alpinejs/focus'
import FormsAlpinePlugin from '../../vendor/filament/forms/dist/module.esm'
import NotificationsAlpinePlugin from '../../vendor/filament/notifications/dist/module.esm'
import Tooltip from '@ryangjchandler/alpine-tooltip'
import 'tippy.js/dist/tippy.css' // optional for styling tooltip

Alpine.plugin(Focus)
Alpine.plugin(FormsAlpinePlugin)
Alpine.plugin(NotificationsAlpinePlugin)
Alpine.plugin(Tooltip)

window.Alpine = Alpine

Alpine.start()

import "../css/app.css"

i mean, with other filament stuff & other plugins, works like a charm havent modified the file

awcodes•11mo ago

Ok. In that case somehow the plugin file is getting loaded after the app js file which is resulting in it not getting registered with alpine. It needs to be include before alpine is started.

ericmpOP•11mo ago

how can i make it to be included before alpine is started? i need to include some vendor js from the plugin i guess or how?

awcodes•11mo ago

can't really answer that without seeing your setup. you could always just make your own plugin using one of those as a guide. maybe try submitting an issue on the github repo. it should still work. so the plugin author will be the best person to try to get answers from.

ericmpOP•11mo ago

fair thanks for the help 🙌

Gaming

Programming

Searching for an image cropper editor compatible with v2