Profile Images

interface ProfileImageUploadProps {
  value?: string;              // Current image (base64)
  onChange: (value: string) => void;  // Called when image changes
  onError?: (error: string) => void;  // Error handler
  disabled?: boolean;          // Disable interactions
}

type UploadStatus = 
  | "idle"       // No activity
  | "dragging"   // User is dragging file over orb
  | "uploading"  // Processing and optimizing image
  | "cropping"   // Crop editor is open
  | "success"    // Upload completed successfully
  | "error";     // Upload failed

<Cropper
  image={selectedImageSrc}
  crop={crop}
  zoom={zoom}
  aspect={1}  // Square crop (1:1 ratio)
  onCropChange={setCrop}
  onZoomChange={setZoom}
  onCropComplete={onCropComplete}
  zoomWithScroll
  showGrid={true}
  cropShape="rect"
/>

interface Area {
  x: number;       // Left position in pixels
  y: number;       // Top position in pixels
  width: number;   // Width in pixels
  height: number;  // Height in pixels
}

function validateProfileImageFile(file: File): string | null {
  // Check file type
  const validTypes = ['image/jpeg', 'image/png', 'image/webp'];
  if (!validTypes.includes(file.type)) {
    return 'Invalid file type. Please upload a JPEG, PNG, or WebP image.';
  }

  // Check file size (5 MB limit)
  const maxSize = 5 * 1024 * 1024; // 5 MB in bytes
  if (file.size > maxSize) {
    return 'File size exceeds 5 MB. Please choose a smaller image.';
  }

  return null; // No errors
}

async function optimizeProfileImage(file: File, cropArea?: Area): Promise<Blob> {
  // Create image element
  const img = await loadImage(file);
  
  // Create canvas for processing
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  // Set output dimensions
  canvas.width = 400;
  canvas.height = 400;
  
  // Apply crop if specified
  if (cropArea) {
    ctx.drawImage(
      img,
      cropArea.x, cropArea.y, cropArea.width, cropArea.height,  // Source
      0, 0, 400, 400  // Destination
    );
  } else {
    // No crop - resize entire image
    ctx.drawImage(img, 0, 0, 400, 400);
  }
  
  // Convert to optimized blob
  return new Promise((resolve) => {
    canvas.toBlob(
      (blob) => resolve(blob),
      'image/jpeg',  // Output format
      0.92           // Quality (92%)
    );
  });
}

interface PersonalInfo {
  // ... other fields
  profileImageUrl?: string;  // Base64-encoded image
}

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA...

async function toBase64ProfileImage(blob: Blob): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => {
      resolve(reader.result as string);
    };
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

aria-label="Upload profile photo"
aria-label="Change profile photo"
aria-label="Remove photo"
aria-label="Edit photo"