React

Verkleinern Sie PDFs und Fotos vor dem Upload in einer React-App, auch mit react-dropzone, ohne Ihren Upload-Handler zu ändern.

Kein React-Paket zu installieren: Laden Sie das Script einmal und fügen Sie ein Attribut hinzu. Der Helfer fängt die Datei ab, bevor React sie erhält, und übergibt Ihrem onChange oder onDrop die verkleinerte Datei.

1. Script laden

In der index.html oder, bei Next.js, in Ihrem 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. Ein Dateifeld

JSX

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

3. react-dropzone

Setzen Sie das Attribut auf das Root-Element. Es gilt sowohl für das Ablegen als auch für das versteckte Input-Element, das „Durchsuchen“ verwendet.

JSX

const { getRootProps, getInputProps } = useDropzone({
  onDrop: (files) => upload(files[0]),   // erhält die verkleinerte Datei
});

<div {...getRootProps({ 'data-pdfkind-max': '5MB' })}>
  <input {...getInputProps()} />
  Dokument hier ablegen
</div>

Selbst aufrufen

Für Dateien aus der Zwischenablage, von einer Kamera oder aus einer eigenen Dateiauswahl:

JSX

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

Tipp: Lesen Sie die Dateien aus dem Event (e.target.files oder die an onDrop übergebenen Dateien), wie es die meisten Codes bereits tun. Erhält Ihr Code trotzdem die Originaldatei, lesen Sie Fehlerbehebung.

ZurückFunktionsweise Weiter Vue

Zuletzt aktualisiert am 3. November 2026 · Fragen: contact@pdfkind.com