"use client";

import { Camera, Upload, UserCircle, XIcon } from "lucide-react";
import type { InputHTMLAttributes } from "react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import {
  type FileMetadata,
  type FileWithPreview,
  useFileUpload,
} from "@/hooks/use-file-upload";

export type AvatarUpload2Props = {
  accept?: string;
  maxSize?: number;
  initialFile?: FileMetadata;
  onFilesChange?: (files: FileWithPreview[]) => void;
  onFilesAdded?: (addedFiles: FileWithPreview[]) => void;
  disabled?: boolean;
};

export function AvatarUpload2({
  accept = "image/png,image/jpeg",
  maxSize,
  initialFile,
  onFilesChange,
  onFilesAdded,
  disabled,
}: AvatarUpload2Props) {
  const [
    { files, isDragging },
    {
      openFileDialog,
      getInputProps,
      handleDragEnter,
      handleDragLeave,
      handleDragOver,
      handleDrop,
      removeFile,
    },
  ] = useFileUpload({
    accept,
    maxFiles: 1,
    maxSize,
    initialFiles: [...(initialFile ? [initialFile] : [])],
    onFilesChange,
    onFilesAdded,
  });

  const previewUrl = (files.length > 0 && files[0]?.preview) || null;

  const handleRemoveUploadedAvatar = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    e.stopPropagation();
    removeFile(files[0]?.id || "");
  };

  const handleUploadAvatar = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    e.stopPropagation();
    openFileDialog();
  };

  return (
    <div className="relative flex">
      {/* Hidden input */}
      <input
        {...(getInputProps({
          disabled,
        }) as InputHTMLAttributes<HTMLInputElement>)}
        aria-label="Upload avatar file"
        className="sr-only"
        tabIndex={-1}
      />

      {/* Avatar upload button / Avatar preview */}
      <button
        type="button"
        aria-label={previewUrl ? "Change avatar" : "Upload avatar"}
        data-dragging={isDragging || undefined}
        className={cn(
          "group/avatar-upload relative isolate size-24 shrink-0 rounded-full bg-muted ring-[3px] ring-transparent transition-all outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50 data-[dragging=true]:bg-accent",
          "data-[dragging=true]:ring-primary/50",
          disabled && "cursor-not-allowed"
        )}
        onClick={openFileDialog}
        onDragEnter={handleDragEnter}
        onDragLeave={handleDragLeave}
        onDragOver={handleDragOver}
        onDrop={handleDrop}
      >
        {/* Dragging overlay */}
        <div
          aria-hidden="true"
          className={cn(
            "pointer-events-none absolute inset-0 z-10 flex origin-center items-center justify-center rounded-full bg-accent/50 opacity-0 backdrop-blur-xs transition-all duration-300",
            isDragging && "opacity-100"
          )}
        >
          <Upload
            aria-hidden="true"
            className={cn(
              "size-6 text-accent-foreground duration-300",
              isDragging ? "animate-in zoom-in-75" : "animate-out zoom-out-75"
            )}
          />
        </div>

        <Avatar className="size-full bg-transparent">
          <AvatarImage
            className="object-cover object-center"
            alt={files[0]?.file?.name ?? "Avatar"}
            src={previewUrl ?? undefined}
          />
          <AvatarFallback className="relative bg-transparent" aria-hidden="true">
            <UserCircle aria-hidden="true" className="absolute inset-0 m-auto size-8" />
          </AvatarFallback>
        </Avatar>
      </button>

      {/* Remove / Upload buttons */}
      <div className="absolute right-0 bottom-0">
        {previewUrl ? (
          <Button
            size="icon"
            variant="outline"
            aria-label="Remove avatar"
            title="Remove avatar"
            disabled={disabled}
            className="group rounded-full backdrop-blur-md"
            onClick={handleRemoveUploadedAvatar}
          >
            <XIcon className="transition-all group-hover:scale-110" />
          </Button>
        ) : (
          <Button
            size="icon"
            variant="outline"
            aria-label="Upload avatar"
            title="Upload avatar"
            disabled={disabled}
            className="group rounded-full backdrop-blur-md"
            onClick={handleUploadAvatar}
          >
            <Camera className="transition-all group-hover:scale-110" />
          </Button>
        )}
      </div>
    </div>
  );
}
Avatar Upload 2

More Components

Placeholder title

Frequently Asked Questions

Are the React components production ready?

Does shadcncraft work for developers using shadcn/ui?

What stack is used?

Can I modify the code?

Does this replace shadcn/ui?

Join 3,000+ builders shipping with shadcncraft

Real support from the team behind shadcncraft
