UploadDropzone

Zona con borde punteado que acepta carga de archivos mediante arrastrar y soltar o clic para explorar. Los archivos se validan contra la lista de tipos accept, maxFileSize (en MB) y cantidad máxima maxFiles antes de enviarse a onFilesSelected. Los archivos inválidos disparan onValidationError con una razón y contexto. El input oculto se resetea tras cada selección para poder seleccionar el mismo archivo nuevamente.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | onFilesSelected | (files: File[]) => void | Sí | — | Se ejecuta con el arreglo de archivos válidos seleccionados. | | multiple | boolean | No | false | Permite seleccionar más de un archivo a la vez. | | accept | string \| string[] | No | — | Tipos MIME o extensiones aceptadas (p. ej. 'image/*', ['.pdf', '.docx']). | | maxFileSize | number | No | — | Tamaño máximo de archivo en megabytes. | | maxFiles | number | No | — | Número máximo de archivos en una selección. | | disabled | boolean | No | false | Deshabilita clics y arrastrar y soltar. | | icon | string | No | 'upload' | Nombre del ícono mostrado en la zona. | | iconSize | number | No | 40 | Tamaño del ícono en píxeles. | | iconColor | string | No | primary del tema | Color del ícono. | | label | string | No | 'Upload File' | Texto de etiqueta bajo el ícono. | | labelStyle | React.CSSProperties | No | — | Estilos de la etiqueta. | | labelClassName | string | No | — | Clase CSS de la etiqueta. | | onValidationError | (reason, info?) => void | No | — | Se ejecuta cuando un archivo falla la validación. reason es 'maxFileSizeExceeded', 'maxFileCountExceeded' o 'invalidFileType'. | | containerStyle | React.CSSProperties | No | — | Estilos del contenedor de la dropzone. | | containerClassName | string | No | — | Clase CSS del contenedor interno. |

Uso

Carga de imágenes básica

import { UploadDropzone } from '@/components/UploadDropzone';

export default function Example() {
  return (
    <UploadDropzone
      accept="image/*"
      maxFileSize={5}
      onFilesSelected={(files) => console.log('Archivos:', files)}
      onValidationError={(reason, info) => console.warn(reason, info)}
    />
  );
}

Múltiples archivos con límite de cantidad

import { UploadDropzone } from '@/components/UploadDropzone';

export default function Example() {
  return (
    <UploadDropzone
      multiple
      maxFiles={3}
      accept={['.pdf', '.docx']}
      maxFileSize={10}
      label="Arrastra hasta 3 documentos aquí"
      onFilesSelected={(files) => {
        files.forEach((f) => console.log(f.name));
      }}
      onValidationError={(reason) => alert(`Validación fallida: ${reason}`)}
      containerStyle={{ height: 200 }}
    />
  );
}