React

Zmniejszaj pliki PDF i zdjęcia przed przesłaniem w aplikacji React, także z react-dropzone, bez zmiany procedury obsługi przesyłania.

Nie trzeba instalować żadnego pakietu React: załaduj skrypt raz i dodaj atrybut. Asystent przechwytuje plik, zanim zrobi to React, i przekazuje do onChange lub onDrop zmniejszony plik.

1. Załaduj skrypt

W pliku index.html lub, w przypadku Next.js, w głównym layoucie:

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. Pole pliku

JSX

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

3. react-dropzone

Dodaj atrybut do elementu głównego. Obejmuje on zarówno upuszczanie, jak i ukryte pole używane przez przycisk „przeglądaj”.

JSX

const { getRootProps, getInputProps } = useDropzone({
  onDrop: (files) => upload(files[0]),   // otrzymuje zmniejszony plik
});

<div {...getRootProps({ 'data-pdfkind-max': '5MB' })}>
  <input {...getInputProps()} />
  Upuść tutaj swój dokument
</div>

Samodzielne wywołanie

Dla plików ze schowka, z aparatu lub z niestandardowego selektora:

JSX

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

Wskazówka. Odczytuj pliki ze zdarzenia (e.target.files lub pliki przekazane do onDrop), jak robi to większość kodu. Jeśli Twój kod nadal otrzymuje oryginalny plik, zobacz Rozwiązywanie problemów.

WsteczJak to działa Dalej Vue

Ostatnia aktualizacja: 3 listopada 2026 · Pytania: contact@pdfkind.com