Componentes · z-ui

FileDropZone

Área para soltar ou escolher arquivos. Valida formato e tamanho, confere se o PDF abre e se tem senha, e troca ícone, cor e ações conforme o estado. O texto de estado fica numa região viva para o leitor de tela.

Contrato do envelope

Um PDF de até 10 MB, com verificação do arquivo. Teste com um PDF com senha ou um arquivo renomeado para .pdf.

Anexe o contratoArraste o PDF para cá ou selecione no computador. Até 10 MB.

Vários anexos

Com multiple, os arquivos aceitos entram numa lista com botão de remover. Aqui o envelope aceita até 3 anexos em PDF ou imagem.

Documentos complementaresRG, comprovante de endereço ou procuração. PDF, JPG ou PNG de até 5 MB.

0 de 3 anexos

Arquivo restaurado

Volta para a etapa com o arquivo que já tinha sido anexado.

aditivo-contrato-0427.pdf812 KB · Anexado anteriormente

Estados

Os seis estados forçados pela prop status, com o texto que cada um costuma ter.

Anexe o contratoArraste o PDF para cá ou selecione no computador.

Solte para anexarO arquivo é verificado assim que chegar.

Enviando o contratocontrato-locacao-sala-12.pdf · 62%

contrato-locacao-sala-12.pdf1,8 MB · pronto para envio

Arquivo grande demais (24 MB)O limite é 10 MB. Reduza o arquivo e tente de novo.

PDF protegido por senhaRemova a senha do documento e envie de novo para que ele possa ser assinado.

Uso

const ref = useRef<FileDropZoneRef>(null);

<FileDropZone
  ref={ref}
  title="Anexe o contrato"
  accept=".pdf"
  maxFileSize={10 * 1024 * 1024}
  validatePdf
  onValidated={(file) => upload(file)}
/>

ref.current?.setStatus("loading", "Enviando o contrato");

Props

Prop	Tipo	Padrão	Descrição
title	string	—	Título no estado inicial.
description	string	—	Texto de apoio no estado inicial.
accept	string	—	Extensões e tipos aceitos, como ".pdf,image/*". Validado também no drop.
maxFileSize	number	10 MB	Limite por arquivo, em bytes.
multiple / maxFiles	boolean / number	false	Aceita vários arquivos e mostra a lista.
validatePdf	boolean	false	Confere a assinatura %PDF e recusa PDF com senha, sem dependências.
onFile	(file: File) => void	—	Chamado para cada arquivo aceito.
onFilesChange	(files: File[]) => void	—	Lista atual depois de adicionar ou remover.
onValidated	(file: File) => void	—	Chamado para cada PDF que passou na verificação.
onReject	(rejections: FileRejection[]) => void	—	Arquivos recusados e o motivo: type, size, count, invalid-pdf ou encrypted-pdf.
status	"idle" \| "dragging" \| "loading" \| "success" \| "error" \| "warning"	"idle"	Força um estado pelo componente pai.
size	"sm" \| "md"	"md"	Altura mínima e espaçamento da área.
restoredFile	{ name: string; size?: number }	—	Mostra um arquivo anexado antes como sucesso.
onCameraClick	() => void	—	Mostra o botão Usar câmera no estado inicial.
onRetry / retryLabel	() => void / string	—	Ação do botão de erro. Sem onRetry, ele reabre o seletor.
children	ReactNode	—	Substitui as ações padrão. Use FileDropZone.Actions.
ref	FileDropZoneRef	—	getFile, getFiles, clear, openFilePicker e setStatus(status, title, description).