Formularios@unozero-ai/ui

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.

Suelta aquí el exporte del huellero

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.

Arrastra las facturas aquí o haz clic para elegirlas

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.

Subir documentosLimpiar

Envía sin archivos para ver el error.

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).

FileDropzone · <uz-file-dropzone>

PropTipoDefectoDescripción
namestring""Nombre con el que cada archivo entra en el FormData; sin él no se envían.
labelstring""Etiqueta visible encima de la zona; también la nombra.
hintstring""Línea secundaria: qué se admite («PDF o XML · máx. 10 MB»).
acceptstring""Como el atributo nativo: application/pdf,.xml,.csv,.xlsx.
multiplebooleanfalseAdmite varios archivos: lo nuevo se suma a la lista en vez de reemplazarla.
maxSizenumber0Tamaño máximo por archivo, en MB. 0 = sin límite.
requiredbooleanfalseSin archivos, el formulario no se envía y se dice debajo.
disabledbooleanfalseBloquea la zona y la lista; también lo pone un <fieldset disabled>.
filesFile[][]Los archivos elegidos, en orden. Solo propiedad, sin atributo.
EventoDescripción
onChangeLa lista de archivos cambió. detail: File[].
SlotDescripción
(por defecto)Texto principal de la zona. Por defecto, el label fileDropHint.
Parte CSSDescripción
uz-file-dropzone::part(zone)La zona (<button>).
uz-file-dropzone::part(list)La lista de archivos elegidos.
MétodoDescripción
checkValidity()—
reportValidity()—
removeFile()Quita un archivo de la lista por su nombre.