File Input

# File input

¿Qué es?

El componente file-input permite al usuario seleccionar archivos desde su dispositivo. Existen dos variantes de presentación dentro del mismo componente base: mediante un botón estándar (file-input--button) o mediante un área de arrastre/dropzone (file-input--drop).

¿Cuándo usarlo?

- Utiliza la variante botón (file-input--button) en formularios convencionales donde el espacio es limitado o la carga de archivos es un paso menor. - Utiliza la variante dropzone (file-input--drop) en interfaces más modernas o amplias, cuando la carga de archivos es la acción principal de esa pantalla.

Variantes

- file-input--button: Presentación clásica con botón "Seleccionar archivo" y texto adyacente. - file-input--drop: Presentación en forma de caja punteada (dropzone).

Modificadores de Estado

- file-input--sm (solo botón): Tamaño reducido. - file-input--has-file: Cambia la presentación visual para mostrar la información del archivo seleccionado y la opción de descartarlo. - file-input--dragover (solo dropzone): Estado activo al arrastrar un archivo por encima de la zona. - file-input--error (solo dropzone): Borde de advertencia cuando ocurre un problema con el archivo.

Consideraciones de accesibilidad y limitaciones del navegador

Los navegadores no permiten estilizar libremente el elemento nativo <input type="file">. Por lo tanto, se ha optado por un patrón de ocultación visual (.sr-only o .file-input__control) asociado a una <label> que actúa como el área clicable real.

• El foco del teclado siempre recae sobre el input nativo (aunque esté oculto), y mediante CSS delegamos el anillo de foco (box-shadow) al contenedor o la zona de arrastre para hacerlo visiblemente claro.
• Esta estructura garantiza que los lectores de pantalla puedan interactuar nativamente con el control, indicando si hay un archivo cargado o no, pero al mismo tiempo permite un diseño 100% acorde a Figma.
• ¡Aviso! El texto simulado de los ejemplos ("Ningún archivo seleccionado" o "informe.pdf") se implementa mediante elementos <span> separados, ya que el navegador no expone este texto a CSS.

Diferencia entre Base HTML/CSS y Comportamiento JavaScript

El componente entregado proporciona toda la estructura HTML, las clases BEM y los estilos interactivos CSS básicos (focus, hover, active). Sin embargo, hay dos aspectos que requieren JavaScript para funcionar de forma real: 1. Actualización del nombre del archivo: Al seleccionar un archivo, se debe actualizar mediante JS el texto estático span.file-input__file-name para que refleje el valor de input.files[0].name. 2. Eventos reales Drag & Drop: La zona de dropzone requiere JavaScript (listeners de dragenter, dragover, dragleave, drop) para agregar/quitar dinámicamente la clase .file-input--dragover y asignar el archivo soltado al input nativo oculto.

<div class="file-input file-input--button">
  <input type="file" id="file-base" class="file-input__control sr-only">
  
  <div class="file-input__wrapper">
    <label for="file-base" class="file-input__button">
      <svg class="file-input__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
  <path d="M13 11H21V13H13V21H11V13H3V11H11V2.99707H13V11Z" fill="currentColor"/>
</svg>
      <span class="file-input__button-text">Seleccionar archivo</span>
    </label>
    
    <span class="file-input__text" id="file-base-desc">Ningún archivo seleccionado</span>
  </div>
</div>