File uploader

El File uploader es el componente encargado de permitir la selección, validación y carga de archivos desde el dispositivo del usuario hacia el sistema. Su uso garantiza una experiencia clara, controlada y consistente en todos los flujos donde se requiera adjuntar información externa.

Este componente estandariza la forma en que los archivos son gestionados dentro de la plataforma, asegurando coherencia visual, accesibilidad y comportamiento predecible.

Propósito

El FileUploader debe utilizarse cuando un flujo requiere:

Adjuntar documentos obligatorios.
Subir evidencias o soportes.
Cargar imágenes o archivos multimedia.
Importar información estructurada (ej. CSV).

Variantes

El FileUploader cuenta con cuatro variantes que se adaptan a distintos niveles de complejidad dentro de la interfaz:

Basic
Auto
Advanced
Template

La selección de la variante debe responder a la importancia del archivo dentro del flujo y al nivel de control requerido.

Descripción

Versión simplificada para cargas individuales dentro de formularios tradicionales.

Cuándo usar

Cuando solo se requiere un archivo.
Cuando el archivo es un campo más dentro de un formulario.
Cuando no se necesita barra de progreso visible.

Cuándo no usar

Carga múltiple.
Procesos documentales complejos.
Necesidad de drag & drop.

Descripción

Variante altamente personalizable que permite redefinir la estructura visual y funcional del componente.

Cuándo usar

Cuando se requiere diseño personalizado.
Cuando la carga es el elemento principal de la pantalla.
Cuando existen validaciones o lógica compleja por archivo.

Cuándo no usar

Cuando Advanced cubre completamente la necesidad.

Guía de decisión

La siguiente tabla presenta una visión general de las variantes del FileUploader y sus diferencias principales para apoyar su correcta implementación.

Variante	Interacción	Personalización	Caso ideal
Basic	Manual	Baja	Formularios simples
Template	Personalizada	Alta	Plataformas complejas

Anatomía

El FileUploader se compone de una serie de elementos estructurales definidos.
Dependiendo de la variante, algunos de estos elementos pueden estar presentes, omitirse o configurarse de manera diferente según su nivel de complejidad y funcionalidad.

Button
Helper text / Drop zone
Icono (opcional)

Estados

El componente debe definir los siguientes estados de interacción y validación.

Cada estado debe diferenciarse visualmente y comunicar su condición de forma clara mediante indicadores y mensajes consistentes.

Basic

Default
Completed

Nota

El botón de selección de archivo sigue la jerarquía y los estados definidos en nuestro Sistema de Diseño para los botones estándar.

Advanced

Default
Drag-over
Uploading
Completed

Comportamiento

El comportamiento del FileUploader se organiza en etapas que estructuran el ciclo de vida del archivo.

Cada etapa puede configurarse según las necesidades del flujo y la variante implementada.

Selección de archivos

Puede permitir uno o múltiples archivos según configuración.
Debe validar tipo y tamaño antes de subir.
Puede permitir reemplazo del archivo seleccionado.

Validaciones

Tamaño máximo configurable.
Tipos permitidos definidos por formato o MIME type.
Límite de cantidad de archivos.

Proceso de carga

Manual (requiere botón Upload).
Automático (Auto).
Personalizado mediante eventos.

Eliminación

Antes de la carga.
Después de la carga (según flujo).