ImageUpload
Subida de una imagen (logo, portada) con vista previa, tipo y tamaño validados.
Usar
import { ImageUpload } from "@unozero-ai/ui/react";
<ImageUpload></ImageUpload>Configurador
Sube una imagen y cambia la forma y el ajuste para ver cómo cae en cada marco.
<ImageUpload label="Logo del hotel" />Subir y quitar
El componente no sube nada: valida el tipo y el tamaño, enseña la vista previa y te entrega el File en onSelect, dentro de detail.file. La subida es tuya; mientras dura, uploading pone el indicador encima y bloquea clic, teclado y soltar. currentUrl es la imagen ya guardada, y la ✕ para quitarla se ve siempre (en móvil no hay hover) y emite onRemove: tú decides qué borrar.
Lo que cambió con el kit 0.1: la vista previa del archivo nuevo la hace el propio elemento, con una URL temporal que libera solo, así que ya no necesitas URL.createObjectURL para enseñarla. onSelect recibe un evento con el archivo en detail.file, no el archivo, y ya no es obligatorio; currentUrl vacío es "", no null.
Formas
Elige la forma por el sitio donde se va a ver la imagen: square para logos cuadrados y favicons, wide para logos horizontales y banner para portadas y fotos. accept y maxSizeMb se ajustan a cada uso: un favicon no necesita 5 MB. Se puede soltar un archivo encima o pulsar el marco, con el ratón o con Enter.
Ajuste
contain, el valor por defecto, enseña la imagen entera con margen: es el de los logos, que no se pueden recortar. cover llena el marco y recorta lo que sobra: es el de las fotos. Sube una foto en cualquiera de los dos para compararlos: aquí la misma foto pasa al otro marco con URL.createObjectURL, y esa URL temporal sí es tuya y la liberas tú.
Subiendo, error y deshabilitado
Con uploading el indicador tapa el marco hasta que termina la subida. Si el archivo no es una imagen o pasa de maxSizeMb, el marco se sacude, el motivo aparece debajo y no se llama a onSelect: prueba con una foto de más de 1 MB en el segundo. Deshabilitado, la imagen se ve pero no se cambia ni se quita.
En un formulario
Es un control de formulario nativo: con name, el File elegido entra en el FormData como el de un <input type="file">, así que puedes enviarlo tal cual en un multipart/form-data. Con required hace falta un archivo nuevo o una currentUrl, y form.reset() quita el elegido.
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).