React

Reduce PDFs and photos before upload in a React app, including react-dropzone, without changing your upload handler.

No React package to install: load the script once and add an attribute. The helper catches the file before React does and hands your onChange or onDrop the reduced file.

1. Load the script

In index.html, or with Next.js in your root layout:

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. A file input

JSX

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

3. react-dropzone

Put the attribute on the root element. It covers both dropping and the hidden input used by “browse”.

JSX

const { getRootProps, getInputProps } = useDropzone({
  onDrop: (files) => upload(files[0]),   // receives the reduced file
});

<div {...getRootProps({ 'data-pdfkind-max': '5MB' })}>
  <input {...getInputProps()} />
  Drop your document here
</div>

Calling it yourself

For files from paste, a camera, or a custom picker:

JSX

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

Tip. Read files from the event (e.target.files or the files passed to onDrop), as most code already does. See Troubleshooting if your code still gets the original file.

PreviousHow it works Next Vue

Last updated November 3, 2026 · Questions: contact@pdfkind.com