FileSelectButton

FileSelectButton combina un <input type="file"> oculto con un Button visible. Antes de seleccionar un archivo renderiza el botón; una vez elegido un archivo, cambia a una fila que muestra el nombre del archivo junto a un botón de ícono para limpiarlo. El componente extiende todas las props de Button (excepto onClick), por lo que puedes personalizar completamente su apariencia.

Úsalo en formularios donde los usuarios necesitan adjuntar un único archivo — como subir una foto de perfil, un PDF de factura o un CSV para importar.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | onFileSelect | (file: File) => void | Sí | — | Callback que se dispara con el objeto File seleccionado cuando el usuario elige un archivo. | | onFileClear | () => void | Sí | — | Callback que se dispara cuando el usuario limpia el archivo seleccionado. | | title | string | Sí | — | Etiqueta del botón (heredada de Button). | | accept | string | No | — | Tipos MIME o extensiones de archivo aceptadas por el input (ej. "image/*", ".pdf,.csv"). | | selectedFileContainerStyle | React.CSSProperties | No | — | Estilos en línea aplicados al contenedor mostrado después de seleccionar un archivo. | | selectedFileNameStyle | React.CSSProperties | No | — | Estilos en línea aplicados al texto del nombre del archivo. | | clearIcon | string | No | "close" | Identificador del ícono para el botón de limpiar. | | clearIconColor | string | No | themeColors.text | Color del ícono de limpiar. | | clearIconSize | number | No | — | Tamaño del ícono de limpiar en píxeles. |

Además, FileSelectButton acepta todas las props de Button excepto onClick (ej. color, type, size, startIcon, style, etc.).

Uso

Básico

import FileSelectButton from '@/components/buttons/FileSelectButton';

export default function Example() {
  return (
    <FileSelectButton
      title="Seleccionar archivo"
      onFileSelect={(file) => console.log('Seleccionado:', file.name)}
      onFileClear={() => console.log('Limpiado')}
    />
  );
}

Restringido a imágenes

import FileSelectButton from '@/components/buttons/FileSelectButton';

export default function Example() {
  return (
    <FileSelectButton
      title="Subir foto"
      accept="image/*"
      startIcon="image"
      onFileSelect={(file) => console.log(file)}
      onFileClear={() => {}}
      size="sm"
      type="outline"
    />
  );
}

Importación de CSV

import FileSelectButton from '@/components/buttons/FileSelectButton';

export default function ImportForm() {
  const handleFile = (file: File) => {
    const reader = new FileReader();
    reader.onload = (e) => console.log(e.target?.result);
    reader.readAsText(file);
  };

  return (
    <FileSelectButton
      title="Elegir CSV"
      accept=".csv"
      onFileSelect={handleFile}
      onFileClear={() => console.log('limpiado')}
    />
  );
}