File Upload

La carga de archivos permite adjuntar documentos a un formulario: una zona de arrastre para elegir el archivo y una fila por cada archivo que muestra su avance, su confirmación o su error.

Propiedades y configuraciones

Cuando usarlo

Úsalo cuando el trámite necesita un documento que la persona tiene como archivo y que el Estado no puede obtener por su cuenta: una liquidación de sueldo, un informe médico o una fotografía de un permiso.

Si la información ya la tiene otra institución (certificado de nacimiento, cotizaciones, Registro Social de Hogares), intenta consultarla por interoperabilidad en vez de pedirla como archivo.

Buenas prácticas

Recomendado: Indica formato, tamaño máximo y cantidad antes de cargar

Explica qué archivos se aceptan, su peso máximo y cuántos se pueden subir, para que la persona prepare el archivo correcto.

Recomendado: Muestra el progreso y el estado de cada archivo

Una fila por archivo con su nombre, su avance y su resultado. La persona confirma qué subió y sabe si debe esperar.

Recomendado: Explica el error y cómo resolverlo

Di qué pasó y qué hacer para corregirlo. Un “error” sin causa obliga a la persona a adivinar.

Recomendado: Usa una carga por cada documento solicitado

Cada documento con su propio título. La persona sabe qué le falta y quien revisa recibe cada archivo en su lugar.

Malas prácticas

No recomendado: No pidas documentos que el Estado ya tiene

Si otra institución del Estado emite el documento, consúltalo directamente en vez de pedir que la persona lo suba.

No recomendado: No ocultes los requisitos del archivo hasta que falla

Sin título ni indicaciones de formato o peso, la persona descubre las reglas recién cuando aparece el error.

No recomendado: No agrupes documentos requeridos en una sola carga

Si pides documentos específicos, mezclarlos impide saber si falta alguno. Una carga múltiple solo sirve para antecedentes adicionales u opcionales.

No recomendado: No permitas enviar con cargas pendientes o con error

Si el envío está disponible mientras un archivo aún sube o falló, la solicitud puede llegar incompleta y ser rechazada después.

Recomendaciones de accesibilidad

Usa el input nativo dentro del label
La zona de arrastre es un <label> que envuelve un <input type="file"> oculto con .cl-visually-hidden. No lo reemplaces por un div clicable: el input nativo da foco por teclado y abre el selector de archivos sin JavaScript.

Da un nombre y una descripción al input
Asocia el título del documento (“Liquidaciones de sueldo”) y las reglas de formato y peso al input con aria-labelledby y aria-describedby, para que se anuncien al llegar con el lector de pantalla.

No dependas del arrastrar y soltar
Arrastrar un archivo no es posible con teclado ni con muchos lectores de pantalla o dispositivos táctiles. El botón “Cargar archivo” y el clic en la zona siempre deben estar disponibles.

Anuncia el progreso y el resultado
Cada barra usa role="progressbar" con aria-valuenow y un aria-label con el nombre del archivo. Actualiza el valor mientras sube y anuncia el resultado (completado o error) en una región con role="status".

Nombra las acciones con el archivo al que afectan
Los botones de ícono (pausar, eliminar, reintentar) llevan aria-label. Si hay varios archivos, incluye el nombre (“Eliminar informe-medico.pdf”) para que la acción no sea ambigua.

Explica el error en texto, no solo con color
La barra roja no basta: el mensaje debe decir qué falló y cómo corregirlo, y quedar asociado al input para que también se anuncie.