AppFileUpload

Moléculas

Campo para enviar arquivos: área de soltar (arrastar e soltar) e seleção pelo explorador de arquivos, com validação de formato e tamanho e a lista dos arquivos escolhidos (miniatura para imagens, nome, tamanho e botão de remover).

Quando usar: foto do cupom fiscal, anexos de um atendimento, foto do participante.

Quando não usar: quando o arquivo precisa ser recortado ou editado antes do envio.

O controle acessível é o próprio <input type="file"> (um só ponto de foco). Arquivos fora de accept ou acima de maxSize não entram na lista e geram a mensagem de erro do campo; a entrada e a saída de arquivos são anunciadas para leitores de tela. O campo não envia nada: quem usa recebe os File em onChange.

Importar

import { AppFileUpload } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppFileUpload.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppFileUpload.css';

Exemplos

Cupom Fiscal

const CupomFiscal = () => <AppFileUpload
    label="Foto do cupom fiscal"
    hint="JPG, PNG ou PDF até 5 MB"
    accept="image/jpeg,image/png,.pdf"
    maxSize={5 * MB} />;

Anexos De Atendimento

const AnexosDeAtendimento = () => <AppFileUpload
    label="Anexos"
    hint="Até 3 arquivos de 5 MB"
    accept="image/jpeg,image/png,.pdf"
    maxSize={5 * MB}
    multiple />;

Foto

const Foto = () => <AppFileUpload
    label="Sua foto"
    hint="JPG ou PNG até 5 MB"
    accept="image/jpeg,image/png"
    maxSize={5 * MB} />;

Com Erro

const ComErro = () => <AppFileUpload
    label="Foto do cupom fiscal"
    hint="JPG, PNG ou PDF até 5 MB"
    accept="image/jpeg,image/png,.pdf"
    maxSize={5 * MB} />;

Desabilitado

const Desabilitado = () => <AppFileUpload
    label="Foto do cupom fiscal"
    hint="JPG, PNG ou PDF até 5 MB"
    accept="image/jpeg,image/png,.pdf"
    maxSize={5 * MB}
    disabled />;

Props

Prop	Tipo	Padrão	Descrição
`label`*	`string`	`—`	Rótulo visível; vira o nome acessível do campo.
`accept`	`string`	`—`	Tipos aceitos, como no `<input type="file">`: `"image/*"`, `".pdf"`, `"image/png,.pdf"`.
`className`	`string`	`—`
`disabled`	`boolean`	`false`
`error`	`string`	`—`	Erro vindo de quem usa (ex.: do servidor). Tem precedência sobre o erro de validação do próprio campo.
`hint`	`string`	`—`	Texto de apoio (ex.: formatos e tamanho aceitos). Some enquanto houver erro.
`id`	`string`	`—`
`maxSize`	`number`	`—`	Tamanho máximo de cada arquivo, em bytes.
`multiple`	`boolean`	`false`	Permite vários arquivos. Sem `multiple`, um arquivo novo substitui o anterior.
`name`	`string`	`—`	`name` do `<input type="file">`, para envio em formulário.
`onChange`	`((files: File[]) => void)`	`—`	Chamado com a lista nova sempre que um arquivo entra ou sai.
`value`	`File[]`	`—`	Arquivos selecionados (controlado).