Core Dropzone

/**
 * Main dropzone component for file drag-and-drop functionality
 * @param props - Configuration options for the dropzone
 * @returns React component with file drop functionality
 */
interface DropzoneProps extends BoxProps, StylesApiProps<DropzoneFactory>, ElementProps<'div', 'onDrop'> {
  /** Called when valid files are dropped to the dropzone */
  onDrop: (files: FileWithPath[]) => void;
  
  /** Called when dropped files do not meet file restrictions */
  onReject?: (fileRejections: FileRejection[]) => void;
  
  /** Called when any files are dropped to the dropzone */
  onDropAny?: (files: FileWithPath[], fileRejections: FileRejection[]) => void;
  
  /** Mime types of the files that dropzone can accepts. By default, dropzone accepts all file types. */
  accept?: Accept | string[];
  
  /** Maximum file size in bytes */
  maxSize?: number;
  
  /** Maximum number of files that can be picked at once */
  maxFiles?: number;
  
  /** Determines whether multiple files can be dropped to the dropzone or selected from file system picker @default true */
  multiple?: boolean;
  
  /** Determines whether files capturing should be disabled @default false */
  disabled?: boolean;
  
  /** Determines whether a loading overlay should be displayed over the dropzone @default false */
  loading?: boolean;
  
  /** Key of theme.colors or any valid CSS color to set colors of Dropzone.Accept @default theme.primaryColor */
  acceptColor?: MantineColor;
  
  /** Key of theme.colors or any valid CSS color to set colors of Dropzone.Reject @default 'red' */
  rejectColor?: MantineColor;
  
  /** Key of theme.radius or any valid CSS value to set border-radius, numbers are converted to rem @default theme.defaultRadius */
  radius?: MantineRadius;
  
  /** Controls dropzone appearance variant @default 'light' */
  variant?: DropzoneVariant;
  
  /** A ref function which when called opens the file system file picker */
  openRef?: React.ForwardedRef<() => void | undefined>;
  
  /** Name of the form control. Submitted with the form as part of a name/value pair. */
  name?: string;
  
  /** Set to autofocus the root element */
  autoFocus?: boolean;
  
  /** If false, disables click to open the native file selection dialog */
  activateOnClick?: boolean;
  
  /** If false, disables drag 'n' drop */
  activateOnDrag?: boolean;
  
  /** If false, disables Space/Enter to open the native file selection dialog. Note that it also stops tracking the focus state. */
  activateOnKeyboard?: boolean;
  
  /** If false, stops drag event propagation to parents */
  dragEventsBubbling?: boolean;
  
  /** Called when the dragenter event occurs */
  onDragEnter?: (event: React.DragEvent<HTMLElement>) => void;
  
  /** Called when the dragleave event occurs */
  onDragLeave?: (event: React.DragEvent<HTMLElement>) => void;
  
  /** Called when the dragover event occurs */
  onDragOver?: (event: React.DragEvent<HTMLElement>) => void;
  
  /** Called when user closes the file selection dialog with no selection */
  onFileDialogCancel?: () => void;
  
  /** Called when user opens the file selection dialog */
  onFileDialogOpen?: () => void;
  
  /** If false, allow dropped items to take over the current browser window */
  preventDropOnDocument?: boolean;
  
  /** Set to true to use the File System Access API to open the file picker instead of using an input type="file" click event @default true */
  useFsAccessApi?: boolean;
  
  /** Use this to provide a custom file aggregator */
  getFilesFromEvent?: (event: DropEvent) => Promise<Array<File | DataTransferItem>>;
  
  /** Custom validation function. It must return null if there's no errors. */
  validator?: <T extends File>(file: T) => FileError | FileError[] | null;
  
  /** Determines whether pointer events should be enabled on the inner element @default false */
  enablePointerEvents?: boolean;
  
  /** Props passed down to the Loader component */
  loaderProps?: LoaderProps;
  
  /** Props passed down to the internal Input component */
  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
  
  /** Component children, typically status components */
  children?: React.ReactNode;
}

const Dropzone: React.FC<DropzoneProps> & {
  Accept: typeof DropzoneAccept;
  Idle: typeof DropzoneIdle;
  Reject: typeof DropzoneReject;
  FullScreen: typeof DropzoneFullScreen;
};

import { Dropzone, MIME_TYPES } from "@mantine/dropzone";

// Basic dropzone
function BasicDropzone() {
  return (
    <Dropzone onDrop={(files) => console.log(files)}>
      <div>Drop files here</div>
    </Dropzone>
  );
}

// Dropzone with file type restrictions
function ImageDropzone() {
  return (
    <Dropzone
      onDrop={(files) => console.log('accepted', files)}
      onReject={(files) => console.log('rejected', files)}
      maxSize={3 * 1024 ** 2} // 3MB
      accept={[MIME_TYPES.png, MIME_TYPES.jpeg, MIME_TYPES.gif]}
    >
      <Dropzone.Accept>
        <Text>Drop images here</Text>
      </Dropzone.Accept>
      <Dropzone.Reject>
        <Text color="red">Only images under 3MB are accepted</Text>
      </Dropzone.Reject>
      <Dropzone.Idle>
        <Text>Drop images or click to select files</Text>
      </Dropzone.Idle>
    </Dropzone>
  );
}

// Dropzone with custom validation
function CustomValidationDropzone() {
  const validator = (file: File) => {
    if (file.name.includes('virus')) {
      return { code: 'name-not-allowed', message: 'File name not allowed' };
    }
    return null;
  };

  return (
    <Dropzone
      onDrop={(files) => console.log(files)}
      validator={validator}
      multiple={false}
    >
      <div>Drop a single file here</div>
    </Dropzone>
  );
}

// Dropzone with loading state
function LoadingDropzone() {
  const [loading, setLoading] = useState(false);

  const handleDrop = async (files: FileWithPath[]) => {
    setLoading(true);
    // Simulate upload
    await new Promise(resolve => setTimeout(resolve, 2000));
    setLoading(false);
  };

  return (
    <Dropzone onDrop={handleDrop} loading={loading}>
      <div>Drop files to upload</div>
    </Dropzone>
  );
}

// Dropzone with programmatic file selection
function ProgrammaticDropzone() {
  const openRef = useRef<() => void>(null);

  return (
    <div>
      <Button onClick={() => openRef.current?.()}>
        Open file picker
      </Button>
      
      <Dropzone
        onDrop={(files) => console.log(files)}
        openRef={openRef}
        activateOnClick={false}
      >
        <div>Files will appear here</div>
      </Dropzone>
    </div>
  );
}

const defaultProps = {
  multiple: true,
  maxSize: Infinity,
  activateOnClick: true,
  activateOnDrag: true,
  dragEventsBubbling: true,
  activateOnKeyboard: true,
  useFsAccessApi: true,
  variant: 'light',
  rejectColor: 'red',
};

Dropzone.Accept: typeof DropzoneAccept;
Dropzone.Idle: typeof DropzoneIdle;
Dropzone.Reject: typeof DropzoneReject;
Dropzone.FullScreen: typeof DropzoneFullScreen;