Upload de arquivos
Uma superfície de upload de drag-and-drop acessível por teclado com extensão e validação de tamanho de arquivo, um indicador de progresso de perímetro animado e uma chamada completa para conectar sua própria camada de armazenamento.
Arraste e solte para enviar ou selecionar
PDF, JPG, PNG, XLSX (máx. 8 MB)
Enviando ...
Enviado com sucesso!
Instalação
Você pode adicionar o componente de upload de arquivo usando o nosso CLI ou manualmente:
Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.
O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.
npx boardui@latest add file-uploadUsando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.
Validação
Configurar os tipos de arquivos aceites com allowedExtensions e o teto de tamanho com maxBytes. O componente atualiza seu próprio texto auxiliar e mensagem de rejeição a partir desses props.
<FileUpload allowedExtensions={["pdf", "png"]} maxBytes={4 * 1024 * 1024} onUploadComplete={saveFile}/>Ícone do arquivo
O ícone incorporado segue a extensão seleccionada. Use renderFileIcon quando seu produto tem seu próprio tipo de arquivo de arte ou sistema de ícones.
import { RiFileCloudLine } from "@remixicon/react";
<FileUpload renderFileIcon={() => ( <RiFileCloudLine className="size-6 text-foreground-icon-secondary" aria-hidden /> )}/>