fn-design-system/components/dropzone.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	output	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant
dropzone	component	ts	ui	1.0.0	impure	Dropzone(props: DropzoneProps): JSX.Element	Zona de drag-and-drop para archivos con estados idle/accept/reject, límite de tamaño y tipos MIME. Wrapper sobre Mantine Dropzone.	dropzone upload drag-drop file component ui interactive mantine				false		@mantine/dropzone	Componente Dropzone que renderiza área de arrastrar y soltar archivos con feedback visual	false			frontend/functions/ui/dropzone.tsx	name type required description onDrop (files: File[]) => void false Callback ejecutado cuando el usuario suelta archivos aceptados name type required description onReject (files: FileRejection[]) => void false Callback ejecutado cuando el usuario suelta archivos rechazados (tipo o tamaño inválido) name type required description accept Record<string, string[]> false Tipos MIME aceptados. Usar IMAGE_MIME_TYPE o MIME_TYPES para constantes predefinidas name type required description maxSize number false Tamaño máximo de archivo en bytes name type required description multiple boolean false Permite seleccionar múltiples archivos a la vez name type required description loading boolean false Muestra estado de carga y desactiva la interacción name type required description disabled boolean false Desactiva el dropzone name type required description children React.ReactNode true Contenido interno, generalmente compuesto con DropzoneAccept, DropzoneReject y DropzoneIdle	onDrop onReject	true	react

Ejemplo

import {
  Dropzone,
  DropzoneAccept,
  DropzoneReject,
  DropzoneIdle,
  IMAGE_MIME_TYPE,
} from '@fn_library/dropzone'
import { IconPhoto, IconUpload, IconX } from '@tabler/icons-react'
import { Group, Text } from '@mantine/core'

function ImageUploader() {
  return (
    <Dropzone
      onDrop={(files) => console.log('Archivos aceptados:', files)}
      onReject={(files) => console.log('Archivos rechazados:', files)}
      accept={IMAGE_MIME_TYPE}
      maxSize={5 * 1024 ** 2}
    >
      <Group justify="center" gap="xl" mih={120} style={{ pointerEvents: 'none' }}>
        <DropzoneAccept>
          <IconUpload size={52} stroke={1.5} />
        </DropzoneAccept>
        <DropzoneReject>
          <IconX size={52} stroke={1.5} />
        </DropzoneReject>
        <DropzoneIdle>
          <IconPhoto size={52} stroke={1.5} />
        </DropzoneIdle>
        <div>
          <Text size="xl" inline>
            Arrastra imágenes aquí o haz clic para seleccionar
          </Text>
          <Text size="sm" c="dimmed" inline mt={7}>
            Máximo 5 MB por imagen
          </Text>
        </div>
      </Group>
    </Dropzone>
  )
}

Notas

El prop onDrop tiene un default vacío (() => {}) para que el componente sea válido sin handler. Siempre sobreescribirlo en uso real.

Sub-componentes exportados:

• DropzoneAccept — visible cuando el archivo arrastrado es aceptado (tipo y tamaño válidos)
• DropzoneReject — visible cuando el archivo es rechazado
• DropzoneIdle — visible en estado de reposo
• DropzoneFullScreen — captura drops en cualquier parte de la pantalla

Constantes de tipos MIME exportadas:

• IMAGE_MIME_TYPE — imágenes comunes (png, jpg, gif, webp, etc.)
• MIME_TYPES — objeto con claves por tipo (pdf, csv, xlsx, mp4, etc.)