componentes / upload
Upload
Área para elegir archivos haciendo clic o arrastrándolos, con filtro de tipos aceptados.
Cómo usar
El Upload solo **captura** los archivos: listarlos, validar el tamaño y enviarlos a un servidor depende de ti. `onFilesChange` recibe `File[]` puro con los archivos recién elegidos, no la suma con los anteriores, así que únelos en tu propio estado para acumular. Es un `<input type="file">` real oculto solo visualmente (Tab para enfocar, Enter o Espacio para abrir), y `accept` también filtra los archivos arrastrados, lo que el navegador no hace solo. Sin `multiple`, solo se conserva el primer archivo de la selección. Valida siempre de nuevo en el servidor.
preview
- Ningún archivo todavía
Upload.tsx
import { Upload } from "vaiperui"; const [files, setFiles] = useState<File[]>([]); <Upload multiple accept=".pdf,image/*" label="Adjuntos" description="PDF o imagen, hasta 5 MB" onFilesChange={(chosen) => setFiles((current) => [...current, ...chosen])}/>Tamaños
preview
tamanos.tsx
<Upload size="sm" onFilesChange={...} /><Upload size="md" onFilesChange={...} /><Upload size="lg" onFilesChange={...} />Colores
El color aparece al pasar el ratón, al arrastrar y en el foco del teclado.
preview
colores.tsx
<Upload variantColor="primary" onFilesChange={...} /><Upload variantColor="success" onFilesChange={...} /><Upload variantColor="warning" onFilesChange={...} /><Upload variantColor="danger" onFilesChange={...} />Tipos aceptados
preview
aceptados.tsx
<Upload accept=".pdf" description="PDF" /><Upload accept="image/*" multiple description="Images" />Estados
preview
Detalle extra
El archivo debe ser un PDF
estados.tsx
<Upload label="..." helperText="..." /><Upload label="..." errorMessage="..." /><Upload label="..." disabled />Color personalizado
preview
color-personalizado.tsx
<Upload customColor="#ff6600" onFilesChange={...} />Props
| Prop | Valores | Predeterminado | Descripción |
|---|---|---|---|
| onFilesChange | (files: File[]) => void | obligatorio | Se llama con los archivos recién elegidos (no la suma con los anteriores) |
| title | ReactNode | "Drag files here or click to choose" | Texto principal del área |
| description | ReactNode | ninguno | Texto de apoyo, p. ej. formatos aceptados y tamaño |
| accept | string | ninguno | Tipos aceptados: .pdf, image/*, image/png, separados por coma. También filtra archivos arrastrados |
| multiple | boolean | false | Acepta varios archivos. Sin él, solo se conserva el primero de la selección |
| label / helperText | string | ninguno | Etiqueta sobre el área y texto de ayuda debajo |
| errorMessage | string | ninguno | Texto de error; su sola presencia fuerza el estado de error (borde rojo, aria-invalid) |
| disabled | boolean | false | Bloquea clic y arrastre |
| name | string | ninguno | Nombre del campo para un <form> nativo (los archivos soltados se copian al input) |
| variantColor | primary | success | warning | danger | primary | Color del estado marcado y del anillo de foco |
| customColor | string | { light, dark } | ninguno | Cualquier color CSS (o un par por tema). Reemplaza a variantColor |
| size | sm | md | lg | md | Tamaño del control y del texto |
| animation | none | smooth | fast | bounce | smooth | Transición al alternar |
| radius | none | sm | md | lg | full | lg | Redondeo de las esquinas del área |
| (nativas) | InputHTMLAttributes<HTMLInputElement> | ninguno | checked, defaultChecked, onChange, name, value, disabled, required, aria-*, className, ref, etc. |
Accesibilidad
- Un `<input type="file">` nativo (oculto visualmente) es el control real; el área punteada es un `<label htmlFor>` suyo.
- El input recibe el foco y el anillo de foco aparece en el área de soltar (`peer-focus-visible`), así que el foco con teclado es visible.
- El nombre accesible es el texto de `title` dentro del área, más `label` si lo pasas (el input tiene ambas etiquetas).
- `errorMessage` define `aria-invalid="true"`; `aria-describedby` apunta al error, o al `helperText` si no hay error.
- Arrastrar y soltar es una vía adicional: quienes usan teclado y lector de pantalla abren el selector del sistema con el input nativo. El icono de subida es `aria-hidden`.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Enfoca el input de archivo. |
| Enter / Space | Abre el selector de archivos del sistema (comportamiento nativo del input). |
Ten en cuenta
- Los archivos rechazados por `accept` se descartan en silencio, sin mensaje ni live region; valida y avisa al usuario con `errorMessage`.
- Los archivos elegidos no los lista el componente; renderiza la lista tú mismo y hazla accesible para tecnologías asistivas.