FileDropzone
Zona para soltar o elegir archivos de cualquier tipo (PDF, XML, hojas de cálculo), con validación y lista de elegidos.
Usar
import { FileDropzone } from "@unozero-ai/ui/react";
<FileDropzone></FileDropzone>Básico
Para documentos de cualquier tipo: extractos, facturas, exportes CSV. Para una sola imagen con vista previa, como un logo, usa ImageUpload. La zona es un botón: se pulsa, se abre con Enter o Espacio, o se suelta encima lo que venga del escritorio. hint dice qué se admite antes de que la persona lo intente.
accept funciona como el atributo nativo (application/pdf,.csv,.xlsx) y maxSize va en MB por archivo. El kit comprueba los dos también al soltar, que se salta el filtro del selector: lo que no cumple no entra, la zona se sacude y el motivo sale debajo con el nombre del archivo. Con multiple, lo nuevo se suma a la lista y un nombre repetido reemplaza al anterior. Prueba a soltar una imagen.
Un solo archivo, texto propio y deshabilitado
Sin multiple, cada archivo reemplaza al anterior. El texto de la zona va en el slot por defecto: úsalo para decir qué archivo es («el exporte del huellero») en vez del genérico «Arrastra archivos o haz clic». Deshabilitada, hint explica por qué y qué hacer.
Leer la lista
onChange llega cada vez que la lista cambia, al añadir o al quitar con la ✕, y trae los archivos en detail. La propiedad files los da en cualquier momento, y removeFile(nombre) quita uno desde tu código. Úsalo para resumir lo que se va a subir o para habilitar el paso siguiente.
Aún no hay facturas.
En un formulario
Es un control de formulario nativo: con name, cada archivo entra en el FormData como en un <input type="file" multiple> (léelos con getAll). required frena el envío sin archivos y lo dice debajo, y form.reset() vacía la lista. Sin name, los archivos no se envían.
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).