Carga de archivos.
La carga muestra requisitos antes de seleccionar, progreso real y resultado por archivo.
Cuándo usar
La carga muestra requisitos antes de seleccionar, progreso real y resultado por archivo.
- Elegir el elemento HTML nativo antes de agregar una primitiva interactiva.
- Mantener el nombre, el resultado y la acción visibles sin depender de un icono.
- Documentar cualquier excepción en el producto consumidor.
Ejemplo visible
Máximo 10 MB · encabezados en la primera fila.
empleo-regional.csv2,4 MB · listo para validar
Anatomía
| Parte | Contrato |
|---|---|
| 1 | Input file |
| 2 | Requisitos |
| 3 | Lista de archivos |
| 4 | Progreso |
| 5 | Eliminar o reintentar |
| 6 | Resultado |
Estados y variantes
| Estado | Comportamiento esperado |
|---|---|
| idle | Tipos, cantidad y tamaño |
| selected | Nombre, tipo y bytes |
| uploading | Bytes o porcentaje medido |
| complete | Recibo o identificador |
| invalid | Archivo y requisito incumplido |
| failed | Causa segura y reintento |
Accesibilidad
- Input nativo permanece disponible.
- Drag and drop tiene equivalente de botón.
- No depender sólo de extensión para validar.
- El servidor vuelve a validar contenido y permisos.
HTML de referencia
<label for="archivo">Archivo CSV</label>
<input id="archivo" name="archivo" type="file" accept="text/csv,.csv" aria-describedby="archivo-reglas">
<p id="archivo-reglas">Máximo 10 MB. Una fila de encabezados.</p>Definition of Done
- Ejemplo visible y código copiable coinciden.
- Teclado, foco, nombre accesible y estado fueron probados.
- El componente funciona sin JavaScript o declara una mejora progresiva acotada.
- Los mensajes cumplen core/prosa en modo estricto.
- La promoción registra versión, compatibilidad y prueba de regresión.