React

Reduza PDFs e fotos antes do upload em um app React, inclusive com react-dropzone, sem mudar seu handler de upload.

Não há pacote React para instalar: carregue o script uma vez e adicione um atributo. O assistente intercepta o arquivo antes do React e entrega o arquivo reduzido ao seu onChange ou onDrop.

1. Carregue o script

No index.html ou, com Next.js, no seu layout raiz:

HTML

<script src="https://pdfkind.com/embed.js" defer></script>

Next.js (app/layout.tsx)

import Script from 'next/script';

<Script src="https://pdfkind.com/embed.js" strategy="afterInteractive" />

2. Um input de arquivo

JSX

<input
  type="file"
  accept="application/pdf,image/*"
  data-pdfkind-max="5MB"
  onChange={(e) => setFile(e.target.files[0])}
/>

3. react-dropzone

Coloque o atributo no elemento raiz. Ele cobre tanto o soltar quanto o input oculto usado pelo “procurar”.

JSX

const { getRootProps, getInputProps } = useDropzone({
  onDrop: (files) => upload(files[0]),   // recebe o arquivo reduzido
});

<div {...getRootProps({ 'data-pdfkind-max': '5MB' })}>
  <input {...getInputProps()} />
  Solte seu documento aqui
</div>

Chamando você mesmo

Para arquivos vindos de colagem, da câmera ou de um seletor personalizado:

JSX

async function handleFile(file) {
  const small = await window.PDFkind.fit(file, { max: '5MB' });
  upload(small);
}

Dica. Leia os arquivos a partir do evento (e.target.files ou os arquivos passados para onDrop), como a maioria dos códigos já faz. Veja Solução de problemas se o seu código ainda recebe o arquivo original.

AnteriorComo funciona Próxima Vue

Atualizado em 3 de novembro de 2026 · Dúvidas: contact@pdfkind.com