'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Formularios
FileUpload
Suelta archivos o búscalos, con tamaños, progreso y errores en una lista.
import { FileUpload, DropZone, FileTrigger } from '@alea/ui';
Ejemplos
FileUpload
Suelta o busca; se marcan los tipos incorrectos y los archivos grandes.
Varios archivos
Varios archivos con límite de tamaño; cada uno se puede quitar con el teclado.
FileTrigger
Cualquier botón puede abrir el selector de archivos: cambiar un avatar, adjuntar archivos, tomar una foto en un teléfono (defaultCamera).
Tipos de lista, botón, límites y reintento
listType="thumbnail" muestra vistas previas de imágenes en las filas y listType="grid" crea tarjetas de imagen; variant="button" quita el área para soltar en formularios ajustados; maxFiles marca los archivos que pasan el límite; una subida terminada muestra un check, y onRetry agrega un botón Reintentar a las fallidas.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- List Type
listType - Variant
variant
Estados
Cada estado de interacción, forzado para compararlos, en ambos temas.
Oscuro
Claro
Anatomía
Las partes del componente y la clase que da estilo a cada una.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent-strong…--alea-bg…--alea-border…--alea-status-danger…--alea-status-success…--alea-surface…--alea-surface-raised…--alea-text…--alea-text-faint…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…
Radius
--alea-radius-sm…
Type
--alea-font-family-body…--alea-font-size-base…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-medium…--alea-font-weight-semibold…
Motion
--alea-motion-duration-fast…
Props
FileUpload props
Suelta archivos o búscalos, con una lista que muestra tamaño, progreso, terminado y errores: filas, filas con vistas previas, o una grilla de tarjetas de imagen.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
accept | string[] | - | Tipos aceptados, por ejemplo ['image/png', '.svg']. |
allowsMultiple | boolean | true | Elige o suelta más de uno. Por defecto true. |
buttonLabel | ReactNode | - | Etiqueta del botón de buscar. Por defecto "Buscar archivos". |
className | string | - | Clases extra para el elemento raíz. |
description | ReactNode | - | Ayuda debajo: tipos y tamaño. |
files | UploadFile[] | - | Los archivos (controlado), con el progreso y los errores que definas. |
isDisabled | boolean | - | Deshabilita todas sus partes. |
label | ReactNode | - | El texto en el área para soltar. |
listType | "text" | "grid" | "thumbnail" | 'text' | Cómo se muestran los archivos: text (filas con un ícono, por defecto), thumbnail (filas con vista previa de imágenes) o grid (tarjetas de imagen, para galerías y avatares). |
maxFiles | number | - | La cantidad máxima de archivos que se conservan; el resto se lista con un error. |
maxSize | number | - | Tamaño máximo en bytes; los archivos más grandes se listan con un error. |
onChange | ((files: UploadFile[]) => void) | - | Se llama con la nueva lista completa cuando se agregan o quitan archivos. |
onRetry | ((file: UploadFile) => void) | - | Muestra un botón Reintentar en archivos con error, y llama a esto con el archivo. |
variant | "button" | "dropzone" | 'dropzone' | dropzone (un área para soltar con un botón, por defecto) o button (solo el botón y la lista, para formularios ajustados). |
DropZone props
Un destino para soltar sin estilo, para diseños propios. Con el teclado se usa el botón de adentro.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | Los hijos del componente. Puede ser una función para cambiar los hijos según el estado del componente. |
FileTrigger props
Cualquier botón que abre el selector de archivos: avatares, adjuntos, importaciones. Para arrastrar y soltar también, usa FileUpload o DropZone.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | El elemento que abre el selector de archivos: un Button, IconButton o Link. |
acceptDirectory | boolean | - | Elige una carpeta entera en lugar de archivos. |
acceptedFileTypes | string[] | - | Tipos de archivo a ofrecer, como ['image/*', '.pdf']. |
allowsMultiple | boolean | - | Permite elegir varios archivos. |
defaultCamera | "user" | "environment" | - | En teléfonos, abre la cámara: user (frontal) o environment (trasera). |
onSelect | ((files: FileList | null) => void) | - | Se llama con los archivos elegidos. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
FileUpload
- Variantes
listTypetextgridthumbnailvariantbuttondropzone- Estados
- Hover (CSS)
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-upload.alea-upload-button.alea-upload-desc.alea-upload-icon.alea-upload-label.alea-upload-list.alea-upload-item.alea-upload-file-icon.alea-upload-meta.alea-upload-name.alea-upload-size.alea-upload-done- Atributos data
data-errordata-list=grid
DropZone
- Estados
- Drop targetKeyboard focusDisabled
- Motion
- more
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-dropzone
Accesibilidad
- Quienes usan teclado o lector de pantalla usan el botón Buscar archivos; la zona para soltar también recibe foco.
- Cada archivo tiene un botón para quitarlo con el nombre del archivo.
Teclado
| Tecla | Acción |
|---|---|
| Enter o Espacio (en la zona) | Abre el selector de archivos |
| Tab | Va al botón para quitar de cada archivo |
Qué hacer y qué evitar
Hacer
- Di qué tipos y tamaños funcionan.
Evitar
- No empieces a subir antes de que la gente vea lo que eligió.