React

Gör PDF-filer och foton mindre före uppladdning i en React-app, även med react-dropzone, utan att ändra din uppladdningshanterare.

Du behöver inte installera något React-paket: läs in skriptet en gång och lägg till ett attribut. Uppladdningshjälpen fångar filen innan React gör det och lämnar den förminskade filen till din onChange eller onDrop.

1. Läs in skriptet

I index.html, eller i rotlayouten om du använder Next.js:

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. Ett filfält

JSX

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

3. react-dropzone

Lägg attributet på rotelementet. Det gäller både när filer släpps och för det dolda filfältet som används för att bläddra.

JSX

const { getRootProps, getInputProps } = useDropzone({
  onDrop: (files) => upload(files[0]),   // tar emot den förminskade filen
});

<div {...getRootProps({ 'data-pdfkind-max': '5MB' })}>
  <input {...getInputProps()} />
  Släpp ditt dokument här
</div>

Anropa den själv

För filer som klistras in, kommer från en kamera eller från en egen filväljare:

JSX

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

Tips. Läs filerna från händelsen (e.target.files eller filerna som skickas till onDrop), som de flesta kodbaser redan gör. Läs Felsökning om din kod ändå får originalfilen.

FöregåendeSå fungerar det Nästa Vue

Senast uppdaterad 3 november 2026 · Frågor: contact@pdfkind.com