React

Verklein PDF’s en foto’s vóór het uploaden in een React-app, ook met react-dropzone, zonder je uploadhandler aan te passen.

Je hoeft geen React-pakket te installeren: laad het script één keer en voeg een attribuut toe. De uploadhulp vangt het bestand op voordat React dat doet en geeft je onChange of onDrop het verkleinde bestand.

1. Laad het script

In index.html, of bij Next.js in je 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. Een bestandsveld

JSX

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

3. react-dropzone

Zet het attribuut op het root-element. Dat geldt zowel voor slepen als voor het verborgen input-element achter ‘bladeren’.

JSX

const { getRootProps, getInputProps } = useDropzone({
  onDrop: (files) => upload(files[0]),   // ontvangt het verkleinde bestand
});

<div {...getRootProps({ 'data-pdfkind-max': '5MB' })}>
  <input {...getInputProps()} />
  Sleep je document hierheen
</div>

Zelf aanroepen

Voor bestanden die worden geplakt, van een camera komen of uit een eigen bestandskiezer:

JSX

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

Tip. Lees de bestanden uit het event (e.target.files of de bestanden die aan onDrop worden meegegeven), zoals de meeste code al doet. Krijgt je code toch nog het originele bestand, zie dan Problemen oplossen.

VorigeHoe het werkt Volgende Vue

Laatst bijgewerkt op 3 november 2026 · Vragen: contact@pdfkind.com