feat: add image cropping functionality for profile photo upload

Author: bennajah

package-lock.json

@@ -50,6 +50,7 @@
         "lucide-react": "^0.475.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-image-crop": "^11.0.7",
         "tailwind-merge": "^3.0.1",
         "tailwindcss": "^4.0.0",
         "tailwindcss-animate": "^1.0.7",

package.json

@@ -2,6 +2,8 @@ import { type BreadcrumbItem, type SharedData } from '@/types';
 import { Transition } from '@headlessui/react';
 import { Head, Link, router, useForm, usePage } from '@inertiajs/react';
 import { FormEventHandler, useRef, useState } from 'react';
+import ReactCrop, { type Crop } from 'react-image-crop';
+import 'react-image-crop/dist/ReactCrop.css';
 
 import DeleteUser from '@/components/delete-user';
 import HeadingSmall from '@/components/heading-small';
@@ -13,6 +15,7 @@ import AppLayout from '@/layouts/app-layout';
 import SettingsLayout from '@/layouts/settings/layout';
 import { useInitials } from '@/hooks/use-initials';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -33,7 +36,18 @@ export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail:
     const getInitials = useInitials();
 
     const [photoPreview, setPhotoPreview] = useState<string | null>(null);
+    const [originalImage, setOriginalImage] = useState<string | null>(null);
+    const [isCropperOpen, setIsCropperOpen] = useState<boolean>(false);
+    const [crop, setCrop] = useState<Crop>({
+        unit: '%',
+        width: 100,
+        height: 100,
+        x: 0,
+        y: 0,
+    });
+
     const photoInput = useRef<HTMLInputElement | null>(null);
+    const imageRef = useRef<HTMLImageElement | null>(null);
 
     const { data, setData, post, errors, processing, recentlySuccessful } = useForm<Required<ProfileForm>>({
         _method: 'patch',
@@ -51,12 +65,12 @@ export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail:
 
         if (!photo) return;
 
-        setData('photo', photo);
-
         const reader = new FileReader();
 
         reader.onload = (e: ProgressEvent<FileReader>) => {
-            setPhotoPreview(e.target?.result as string);
+            const result = e.target?.result as string;
+            setOriginalImage(result);
+            setIsCropperOpen(true);
         };
 
         reader.readAsDataURL(photo);
@@ -67,6 +81,7 @@ export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail:
             preserveScroll: true,
             onSuccess: () => {
                 setPhotoPreview(null);
+                setOriginalImage(null);
                 clearPhotoFileInput();
             },
         });
@@ -78,6 +93,56 @@ export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail:
         }
     };
 
+    const completeCrop = async () => {
+        if (!imageRef.current || !crop.width || !crop.height) return;
+
+        const canvas = document.createElement('canvas');
+        const scaleX = imageRef.current.naturalWidth / imageRef.current.width;
+        const scaleY = imageRef.current.naturalHeight / imageRef.current.height;
+        const pixelRatio = window.devicePixelRatio;
+
+        canvas.width = crop.width * scaleX * pixelRatio;
+        canvas.height = crop.height * scaleY * pixelRatio;
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+        ctx.imageSmoothingQuality = 'high';
+
+        ctx.drawImage(
+            imageRef.current,
+            crop.x * scaleX,
+            crop.y * scaleY,
+            crop.width * scaleX,
+            crop.height * scaleY,
+            0,
+            0,
+            crop.width * scaleX,
+            crop.height * scaleY
+        );
+
+        // Convert canvas to blob
+        const croppedImageUrl = canvas.toDataURL('image/jpeg');
+        setPhotoPreview(croppedImageUrl);
+        setIsCropperOpen(false);
+
+        // Convert data URL to Blob
+        const response = await fetch(croppedImageUrl);
+        const blob = await response.blob();
+
+        // Create a File from Blob
+        const fileName = photoInput.current?.files?.[0]?.name || 'cropped-image.jpg';
+        const croppedFile = new File([blob], fileName, { type: 'image/jpeg' });
+
+        setData('photo', croppedFile);
+    };
+
+    const cancelCrop = () => {
+        setIsCropperOpen(false);
+        clearPhotoFileInput();
+    };
+
     const submit: FormEventHandler = (e) => {
         e.preventDefault();
 
@@ -108,10 +173,10 @@ export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail:
                                 </Avatar>
 
                                 <Button type="button" variant="outline" onClick={selectNewPhoto}>
-                                    Select New Photo
+                                    {auth.user.avatar ? 'Change Photo' : 'Upload Photo'}
                                 </Button>
 
-                                {auth.user.avatar && (
+                                {(auth.user.avatar || photoPreview) && (
                                     <Button type="button" variant="outline" onClick={deletePhoto}>
                                         Remove Photo
                                     </Button>
@@ -192,6 +257,42 @@ export default function Profile({ mustVerifyEmail, status }: { mustVerifyEmail:
                 </div>
 
                 <DeleteUser />
+
+                <Dialog open={isCropperOpen} onOpenChange={setIsCropperOpen}>
+                    <DialogContent className="sm:max-w-md">
+                        <DialogHeader>
+                            <DialogTitle>Crop your profile photo</DialogTitle>
+                        </DialogHeader>
+
+                        <div className="mt-4 flex flex-col items-center gap-4">
+                            {originalImage && (
+                                <ReactCrop
+                                    crop={crop}
+                                    onChange={c => setCrop(c)}
+                                    circularCrop
+                                    aspect={1}
+                                >
+                                    <img
+                                        ref={imageRef}
+                                        src={originalImage}
+                                        alt="Crop preview"
+                                        className="max-h-96"
+                                    />
+                                </ReactCrop>
+                            )}
+
+                            <div className="flex justify-end gap-2 w-full">
+                                <Button variant="outline" onClick={cancelCrop}>
+                                    Cancel
+                                </Button>
+                                <Button onClick={completeCrop}>
+                                    Crop & Save
+                                </Button>
+                            </div>
+                        </div>
+                    </DialogContent>
+                </Dialog>
+
             </SettingsLayout>
         </AppLayout>
     );