Vox Mente
Navegação

Componentes

File Upload

beta

Anexar arquivo a um registro, com o estado do envio visível. Anexo sem estado é anexo que ninguém sabe se chegou.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/file-upload

Playground

Arraste um arquivo ou clique para escolher

PDF ou imagem, até 10 MB

<FileUpload
  label="Arraste um arquivo ou clique para escolher"
  hint="PDF ou imagem, até 10 MB"
  onFilesSelected={(files) => anexar(files)}
/>

Uso

Área de envio de arquivo, sem dependência externa: arrastar-e-soltar mais um input[type=file] real por baixo. Apresentacional — não faz upload, não guarda arquivo, não valida tamanho. `onFilesSelected` entrega os arquivos, e quem consome decide o resto.

Arraste o comprovante ou clique para escolher

PDF ou imagem, até 10 MB

Múltiplos arquivos, com lista

`multiple` habilita mais de um arquivo por vez. `FileUploadList` e `FileUploadItem` mostram o que já foi anexado — `onRemove` é obrigatório na prática, porque anexar o arquivo errado é comum.

Arraste os documentos ou clique para escolher

Você pode selecionar mais de um arquivo

contrato-assinado.pdf248 KB
certificado-conclusao.pdf112 KB

Desabilitado

A área para de responder a clique e a arrastar-e-soltar, mas o texto continua visível — o usuário precisa saber que o envio existe e por que está bloqueado agora.

Envio de anexo desabilitado

Disponível após a aprovação do chamado

Sempre alcançável por teclado

O input real cobre a área e fica transparente — não é escondido com `display:none`. Um dropzone que só responde a mouse exclui parte dos usuários; aqui o campo continua tabulável e anunciado como campo de arquivo por leitor de tela.

Arraste o comprovante ou clique para escolher

PDF ou imagem, até 10 MB

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

FileUpload

PropTipoPadrão
acceptstring—
disabledbooleanfalse
hintstring | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null—
labelstring | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null"Arraste um arquivo ou clique para escolher"
multiplebooleanfalse
onFilesSelected((files: File[]) => void)—

Também aceita as props de React, incluindo className e os atributos de DOM.

FileUploadItem

PropTipoPadrão
name*string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null—
onRemove(() => void)—
sizestring | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null—

Também aceita as props de React, incluindo className e os atributos de DOM.

FileUploadList não tem props próprias — aceita apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css