"use client";

import * as React from "react";

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

export interface FileUploadAreaProps extends Omit<
  React.InputHTMLAttributes<HTMLInputElement>,
  "type" | "className" | "onClick" | "onKeyDown" | "onDragOver" | "onDrop"
> {
  className?: string;
  disabled?: boolean;
  children?: React.ReactNode;
  onClick?: React.MouseEventHandler<HTMLDivElement>;
  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
  onDragOver?: React.DragEventHandler<HTMLDivElement>;
  onDrop?: React.DragEventHandler<HTMLDivElement>;
  onFilesChange?: (
    files: FileList | null,
    event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLDivElement>
  ) => void;
}

export function FileUploadArea({
  className,
  disabled,
  children,
  onClick,
  onKeyDown,
  onDragOver,
  onDrop,
  onChange,
  onFilesChange,
  ...inputProps
}: FileUploadAreaProps) {
  const inputRef = React.useRef<HTMLInputElement | null>(null);

  function openFileDialog() {
    if (disabled) return;
    inputRef.current?.click();
  }

  function handleClick(event: React.MouseEvent<HTMLDivElement>) {
    if (!disabled) {
      openFileDialog();
    }
    onClick?.(event);
  }

  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
    if (!disabled && (event.key === "Enter" || event.key === " ")) {
      event.preventDefault();
      openFileDialog();
    }
    onKeyDown?.(event);
  }

  function handleDragOver(event: React.DragEvent<HTMLDivElement>) {
    if (!disabled) {
      event.preventDefault();
      event.dataTransfer.dropEffect = "copy";
    }
    onDragOver?.(event);
  }

  function handleDrop(event: React.DragEvent<HTMLDivElement>) {
    if (!disabled) {
      event.preventDefault();
      const files = event.dataTransfer?.files ?? null;
      if (files?.length) {
        onFilesChange?.(files, event);
      }
    }
    onDrop?.(event);
  }

  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    if (disabled) return;
    if (event.target.files) {
      onFilesChange?.(event.target.files, event);
    }
    onChange?.(event);
    event.target.value = "";
  }

  return (
    <div className="relative">
      <input
        ref={inputRef}
        type="file"
        className="sr-only"
        disabled={disabled}
        onChange={handleChange}
        {...inputProps}
      />

      <div
        role="button"
        tabIndex={disabled ? -1 : 0}
        aria-disabled={disabled || undefined}
        className={cn(
          "group/file-upload-area flex flex-col items-center gap-4 rounded-md border border-dashed border-input px-6 py-8 transition-[background-color,box-shadow] outline-none hover:bg-primary-foreground",
          "focus-visible:border-solid focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
          "aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:bg-secondary",
          className
        )}
        onClick={handleClick}
        onKeyDown={handleKeyDown}
        onDragOver={handleDragOver}
        onDrop={handleDrop}
      >
        {children}
      </div>
    </div>
  );
}

export function FileUploadAreaIcon({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="file-upload-area-icon"
      className={cn(
        "flex size-10 items-center justify-center rounded-full border border-input/80 text-muted-foreground group-aria-disabled/file-upload-area:text-gray-400 [&_svg:not([class*='size-'])]:size-4.5",
        className
      )}
      {...props}
    />
  );
}

export function FileUploadAreaContent({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="file-upload-area-content"
      className={cn("flex flex-col items-center gap-1", className)}
      {...props}
    />
  );
}

export function FileUploadAreaTitle({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="file-upload-area-title"
      className={cn(
        "text-center text-sm font-medium text-balance group-aria-disabled/file-upload-area:text-gray-400",
        className
      )}
      {...props}
    />
  );
}

export function FileUploadAreaDescription({
  className,
  ...props
}: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="file-upload-area-description"
      className={cn(
        "text-center text-xs text-balance text-muted-foreground group-aria-disabled/file-upload-area:text-gray-400",
        className
      )}
      {...props}
    />
  );
}
File Upload Area

File Upload Area 1

Get access to these components and the full library

Built for real interfaces

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?

More Components

Real support from the team behind shadcncraft
