Our Insights About Modern Technology

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.

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.

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.

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

Advanced

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).
File uploader - PreviousSliderNext - File uploaderComponentes