Image Upload with Fixed Dimensions in ReactJS

                                        src/
│
├── components/
│   └── ImageUploadCroper
│         ├── croppedImage.js → function for generating a cropped image using canvas
 │        └── ImageUploader.js  → Reusable React component for image upload and cropping


│
├── App.jsx → Main component where ImageUploader is used with props


│
└── index.js  → Entry point of the React app
                                    

                                        export const GetCroppedImage = async (
    imageSrc,
    cropArea,
    fileName = "cropped.jpg",
    outputWidth,
    outputHeight
) => {


    // create image
    const image = new Image();
    image.crossOrigin = "anonymous";
    image.src = imageSrc;


    // wait for image load
    await new Promise((resolve, reject) => {
        image.onload = resolve;
        image.onerror = reject;
    });


    // create canvas
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = outputWidth || cropArea.width;
    canvas.height = outputHeight || cropArea.height;


    ctx.drawImage(
        image,
        cropArea.x,
        cropArea.y,
        cropArea.width,
        cropArea.height,
        0,
        0,
        canvas.width,
        canvas.height
    );
    return new Promise((resolve, reject) => {
        canvas.toBlob((blob) => {


            if (!blob) {
                reject(new Error("Canvas is empty"));
                return;
            }


            const file = new File(
                [blob],
                fileName,
                { type: "image/jpeg" }
            );
            resolve(file);


        }, "image/jpeg", 0.95);


    });


};
                                    

                                        import React, { useState } from "react";
import Cropper from "react-easy-crop";
import { GetCroppedImage } from "./cropImage";
const ImageUploader = ({
    width,
    height,
    onChange,
    label = "uplaod Image"
}) => {
    const [imageSrc, setImageSrc] = useState(null);
    const [crop, setCrop] = useState({ x: 0, y: 0 });
    const [zoom, setZoom] = useState(1);
    const [cropArea, setCropArea] = useState(null);
    const [preview, setPreview] = useState({ url: "", width: 1905, height: 716 });
    const aspect = width / height;


    const handleFileChange = (e) => {




        const file = e.target.files[0];
        console.log("show file---->", file);
        if (!file) return;
        if (preview) {
            URL.revokeObjectURL(preview);
            setPreview(null)
        }
        setCrop({ x: 0, y: 0 });
        setZoom(1);
        setCropArea(null)


        const imageUrl = URL.createObjectURL(file);


        const img = new Image();
        img.src = imageUrl;


        img.onload = () => {


            console.log("uploaded width:", img.width);
            console.log("uploaded height:", img.height);


            if (img.width < width || img.height < height) {


                alert(`Image must be at least ${width} × ${height}px`);


                URL.revokeObjectURL(imageUrl);


                return;
            }


            setImageSrc(imageUrl);


        };
    };
    const onCropComplete = (croppedArea, croppedAreaPixels) => {
        setCropArea(croppedAreaPixels);
    };
    const handleCropSave = async () => {
        if (!cropArea) {
            alert("Crop area not ready");
            return;
        }
        const croppedFile = await GetCroppedImage(
            imageSrc,
            cropArea,
            "thumbnail.jpg",
            width,
            height
        );


        const previewUrl = URL.createObjectURL(croppedFile);
        const img = new Image();
        img.src = previewUrl;
              img.onload = () => {


            console.log("Final Width:", img.width);
            console.log("Final Height:", img.height);


            setPreview({
                url: previewUrl,
                width: img.width,
                height: img.height
            });


            onChange(croppedFile);
            setImageSrc(null);
        };


    };
    return (
        <>
            <div>
                <label>{label}</label>
                <input
                    type="file"
                    accept="image/*"
                    onChange={handleFileChange}
                    className="form-control"


                />
                {imageSrc && (
                    <>
                        <div style={{ position: "relative", height: 400 }}>
                            <Cropper
                                image={imageSrc}
                                crop={crop}
                                zoom={zoom}
                                aspect={aspect}
                                onCropChange={setCrop}
                                onZoomChange={setZoom}
                                onCropComplete={onCropComplete}
                            />
                        </div>


                        <button
                            type="button"
                            onClick={handleCropSave}
                            className="btn btn-primary mt-3"
                        >
                            Crop Image
                        </button>
                    </>
                )}


                {preview && (
                    <div className="mt-3">


                        <img
                            src={preview.url}
                            className="w-100"
                            style={{ height: 200, objectFit: "cover" }}
                        />


                        <p className="text-muted mt-1">
                            Width: {preview.width}px | Height: {preview.height}px
                        </p>


                    </div>
                )}  
  </div>
        </>
    )
}
export default ImageUploader
                                    

                                         <ImageUploader
      width={1905}
       height={716}
       onChange={field.onChange}
       label='Thumbnail Image'
         />