Componentes

FileUpload

Zona rebaixada, anel tracejado, coruja vigiando. No arraste ela trabalha. Arquivo vira linha de papel com tamanho mono e X. Sem nuvem genérica.

betaEntradadesde 0.2.0@hiboupay/react

Exemplos#

Planilha

CSV ou XLSX até 10 MB

Coruja vigia · arquivo vira papel

Mesa

Planilha

folha.csv3 B

Celular · 390

Planilha

folha.csv3 B

Enquanto sobe, a linha mostra o progresso

Importar#

tsx

import { FileUpload } from "@hiboupay/react";
import type { FileUploadProps } from "@hiboupay/react";

Quando usar#

Use quando

Importar planilha, comprovante, anexo único ou poucos arquivos.

Não use quando

Galeria de mídia. Campo de texto. Arrastar para mudar ordem (não é este componente).

Anatomia#

01Label
02Zona sunken com coruja idle/working
03Título Sora + dica
04Lista de arquivos em papel
05Linha de arquivo com Progress
06Mensagem de erro ou hint

Estados#

vaziaarraste (anel azul, coruja working)com arquivosenviandoerro (anel danger)disabled

API#

Props documentadas no registro. * indica obrigatória.

Propriedades
Prop	Tipo	Padrão	Descrição
files*	`File[]`		Arquivos aceitos.
onChange*	`(files: File[]) => void`		Nova lista.
accept	`string`		accept nativo. Ex.: .csv,.xlsx.
multiple	`boolean`	`false`	Vários arquivos.
maxSize	`number`		Limite em bytes. O que passa não entra e vira erro.
progress	`Record<string, number>`		0–100 por arquivo. A chave é nome-tamanho.
renderFile	`(file: File) => ReactNode`		Substitui o miolo da linha. O remover continua.
emptyTitle	`string`	`"Solte o arquivo aqui"`	Título da zona vazia.
emptyDescription	`string`	`"ou clique para escolher"`	Apoio.
error	`string`		Erro externo. Substitui o hint.

Acessibilidade#

Teclado

TabFoca o botão da zona.

EnterEspaçoAbre o seletor.

Leitor de tela

—input file sr-only ligado ao label.
—Remover tem aria-label "Remover {nome}".

Boas práticas#

Faça

accept e maxSize explícitos no hint.
Enquanto sobe, progress na linha do arquivo.
disabled esmaece só a zona, não o texto da lista.

Evite

Ícone de nuvem.
Aceitar qualquer tipo e recusar depois sem dizer o porquê.

Conteúdo#

—hint: "CSV ou XLSX até 10 MB". emptyTitle fala o objeto: "Solte a planilha".

Tokens#

Os tokens que desenham este componente. Clique para ver valor, variável e classe.

radius.lg color.primary color.danger elevation.0

Relacionados#

Estado

Progress

Trilha wash. Com número, o corpo é Graffiti e a ponta é Vivid Blue. Indeterminado: a coruja trabalha e a barra desliza.

Estado

EmptyState

Vazio: a coruja vigia até ter o que mostrar. Sem ilustração genérica. Sempre que puder, um próximo passo. É o StatusView no tom neutro.

Estado

ErrorBanner

Erro recuperável com a saída já montada: causa em linguagem humana e "Tentar de novo". É o Notice de perigo com o botão pronto.