"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export type AvatarUploadSize = "sm" | "md" | "lg" | "xl";

export interface AvatarUploadProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  src?: string;
  alt?: string;
  name?: string;
  size?: AvatarUploadSize;
  accept?: string;
  disabled?: boolean;
  onChange?: (file: File | null) => void;
}

const sizeStyles: Record<AvatarUploadSize, string> = {
  sm: "h-16 w-16 text-sm",
  md: "h-20 w-20 text-base",
  lg: "h-24 w-24 text-lg",
  xl: "h-32 w-32 text-xl",
};

const getInitials = (name?: string, alt?: string) => {
  const source = name ?? alt ?? "";
  const words = source.trim().split(" ").filter(Boolean);
  if (words.length === 0) return "";
  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
  return `${words[0][0]}${words[1][0]}`.toUpperCase();
};

const CameraIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.6}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden="true"
  >
    <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
    <circle cx="12" cy="13" r="4" />
  </svg>
);

const UserIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.6}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden="true"
  >
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
    <circle cx="12" cy="7" r="4" />
  </svg>
);

export const AvatarUpload = React.forwardRef<HTMLDivElement, AvatarUploadProps>(
  (
    {
      className,
      src,
      alt,
      name,
      size = "lg",
      accept = "image/*",
      disabled = false,
      onChange,
      ...props
    },
    ref
  ) => {
    const [preview, setPreview] = React.useState<string | null>(null);
    const [isDragging, setIsDragging] = React.useState(false);
    const inputRef = React.useRef<HTMLInputElement>(null);
    const initials = getInitials(name, alt);

    const displaySrc = preview ?? src;

    const handleFile = React.useCallback(
      (file: File | null) => {
        if (file && file.type.startsWith("image/")) {
          const url = URL.createObjectURL(file);
          setPreview(url);
          onChange?.(file);
        }
      },
      [onChange]
    );

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      const file = e.target.files?.[0] ?? null;
      handleFile(file);
    };

    const handleClick = () => {
      if (!disabled) {
        inputRef.current?.click();
      }
    };

    const handleKeyDown = (e: React.KeyboardEvent) => {
      if ((e.key === "Enter" || e.key === " ") && !disabled) {
        e.preventDefault();
        inputRef.current?.click();
      }
    };

    const handleDragEnter = (e: React.DragEvent) => {
      e.preventDefault();
      e.stopPropagation();
      if (!disabled) {
        setIsDragging(true);
      }
    };

    const handleDragLeave = (e: React.DragEvent) => {
      e.preventDefault();
      e.stopPropagation();
      setIsDragging(false);
    };

    const handleDragOver = (e: React.DragEvent) => {
      e.preventDefault();
      e.stopPropagation();
    };

    const handleDrop = (e: React.DragEvent) => {
      e.preventDefault();
      e.stopPropagation();
      setIsDragging(false);

      if (disabled) return;

      const file = e.dataTransfer.files?.[0];
      if (file) {
        handleFile(file);
      }
    };

    React.useEffect(() => {
      return () => {
        if (preview) {
          URL.revokeObjectURL(preview);
        }
      };
    }, [preview]);

    return (
      <div ref={ref} className={cn("relative inline-flex", className)} {...props}>
        <div
          role="button"
          tabIndex={disabled ? -1 : 0}
          onClick={handleClick}
          onKeyDown={handleKeyDown}
          onDragEnter={handleDragEnter}
          onDragLeave={handleDragLeave}
          onDragOver={handleDragOver}
          onDrop={handleDrop}
          aria-label={alt ?? name ?? "Upload avatar"}
          aria-disabled={disabled}
          className={cn(
            "group relative flex shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full border-2 border-border bg-muted text-muted-foreground transition-all",
            sizeStyles[size],
            isDragging && "border-primary ring-2 ring-ring",
            disabled && "cursor-not-allowed opacity-50",
            !disabled && "hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
          )}
        >
          {displaySrc ? (
            <img
              src={displaySrc}
              alt={alt ?? name ?? "Avatar"}
              className="h-full w-full object-cover"
            />
          ) : initials ? (
            <span className="font-semibold text-foreground">{initials}</span>
          ) : (
            <UserIcon className="h-1/2 w-1/2" />
          )}

          {/* Upload overlay */}
          <div
            className={cn(
              "absolute inset-0 flex items-center justify-center rounded-full bg-background/80 opacity-0 transition-opacity",
              !disabled && "group-hover:opacity-100 group-focus-visible:opacity-100",
              isDragging && "opacity-100"
            )}
          >
            <CameraIcon className="h-6 w-6 text-foreground" />
          </div>
        </div>

        <input
          ref={inputRef}
          type="file"
          accept={accept}
          disabled={disabled}
          onChange={handleInputChange}
          className="sr-only"
          aria-hidden="true"
        />
      </div>
    );
  }
);

AvatarUpload.displayName = "AvatarUpload";
Avatar Upload

Dependencies

Files

Installation
