ARTICLE AD BOX
Symfony UX Cropper + LiveComponent always returns full image (width/height null) I’m using Symfony UX CropperJS inside a LiveComponent and the cropper UI works correctly (I can move/resize the crop box), but on submit the cropped image is always the full original image. When I dump the Crop object, the crop data contains x = 0, y = 0, and width / height are null, so getCroppedImage() returns the original image instead of the cropped one.
LiveComponent #[AsLiveComponent] final class CropImage extends AbstractController { use DefaultActionTrait; use ComponentWithFormTrait; #[LiveProp] public ?string $imageName = null; public function instantiateForm(): FormInterface { $crop = $this->cropper->createCrop( $this->imgDir.'tmp/'.$this->imageName ); $crop->setCroppedMaxSize(600, 600); return $this->createFormBuilder(['crop' => $crop]) ->add('crop', CropperType::class, [ 'public_url' => $this->assets->getUrl( 'profile_pic/tmp/'.$this->imageName ), 'cropper_options' => [ 'aspectRatio' => 1, 'viewMode' => 1, 'dragMode' => 'none', 'cropBoxResizable' => false, 'zoomable' => true, 'responsive' => false, 'autoCropArea' => 0.8, ], ]) ->getForm(); } #[LiveAction] public function cropImage() { $this->submitForm(); /** @var Crop $crop */ $crop = $this->getForm()->get('crop')->getData(); dd($crop); // width & height are null $croppedImage = $crop->getCroppedImage(); file_put_contents( $this->imgDir.'profile.jpg', $croppedImage ); } }Twig
{{ form_start(form) }} <div class="card"> <div class="card-body"> {{ form_widget(form) }} <button type="button" data-action="live#action" data-live-action-param="cropImage" class="btn btn-dark mt-5" style="width: 100%;" > Crop it! </button> </div> </div> {{ form_end(form) }}Observed result Dumping the crop object shows:
options: [ "x" => 0, "y" => 0, "width" => null, "height" => null, ]So the crop data from the frontend is not being applied, even though the crop box is adjusted in the UI. Question What is the correct way to wire Symfony UX CropperJS inside a LiveComponent form so that the crop coordinates (width/height) are submitted correctly? Is there a required way to render the form or bind LiveComponent form attributes for CropperType to work properly?
