FileInput

Apresentação

O componente FileInput é responsável por criar campos de entrada para upload de arquivos. Ele permite aos usuários selecionar e enviar arquivos do seu dispositivo, suportando diferentes tipos de arquivos e múltiplos arquivos simultaneamente.

Quando usar

• Para upload de imagens
• Para envio de documentos
• Para upload de arquivos
• Para seleção de mídia
• Para envio de formulários com arquivos
• Para upload de vídeos
• Para seleção de áudios
• Para envio de planilhas
• Para upload de PDFs
• Para seleção de múltiplos arquivos

Forma básica de uso

import { FileInput } from 'eitri-luminus';

// FileInput básico
<FileInput onChange={(e) => console.log(e.target.files)} />

// FileInput com classes personalizadas
<FileInput 
  className="file-input-bordered file-input-primary w-full max-w-xs" 
  onChange={(e) => console.log(e.target.files)}
/>

// FileInput com diferentes tamanhos
<FileInput className="file-input-xs" onChange={(e) => console.log(e.target.files)} />
<FileInput className="file-input-sm" onChange={(e) => console.log(e.target.files)} />
<FileInput className="file-input-md" onChange={(e) => console.log(e.target.files)} />
<FileInput className="file-input-lg" onChange={(e) => console.log(e.target.files)} />

// FileInput com diferentes cores
<FileInput className="file-input-primary" onChange={(e) => console.log(e.target.files)} />
<FileInput className="file-input-secondary" onChange={(e) => console.log(e.target.files)} />
<FileInput className="file-input-accent" onChange={(e) => console.log(e.target.files)} />

// FileInput com tipos específicos de arquivo
<FileInput 
  accept="image/*" 
  onChange={(e) => console.log(e.target.files)}
/>

<FileInput 
  accept=".pdf,.doc,.docx" 
  onChange={(e) => console.log(e.target.files)}
/>

// FileInput com múltiplos arquivos
<FileInput 
  multiple 
  onChange={(e) => console.log(e.target.files)}
/>

// FileInput desabilitado
<FileInput 
  disabled 
  onChange={(e) => console.log(e.target.files)}
/>

// FileInput com label
<div className="form-control w-full max-w-xs">
  <label className="label">
    <span className="label-text">Selecione um arquivo</span>
  </label>
  <FileInput 
    className="file-input-bordered w-full" 
    onChange={(e) => console.log(e.target.files)}
  />
</div>

Propriedades

Propriedade	Tipo	Descrição
onChange	function	Função chamada ao selecionar arquivo
accept	string	Tipos de arquivo aceitos
multiple	boolean	Permite seleção de múltiplos arquivos
value	string	Valor do campo
disabled	boolean	Desabilita o campo
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Heranças

O componente FileInput herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa a classe 'file-input' para estilização base
• Suporta diferentes tamanhos (xs, sm, md, lg)
• Suporta diferentes cores (primary, secondary, accent)
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Mantém a semântica HTML apropriada
• Suporta diferentes tipos de arquivo através do atributo accept
• Pode ser usado para upload único ou múltiplo
• É especialmente útil para formulários de upload
• Pode ser combinado com outros componentes
• Suporta estados desabilitado
• Mantém o tipo "file" por padrão
• Pode ser usado em formulários
• Suporta validação de tipos de arquivo
• Pode ser estilizado com diferentes variantes