React

React uygulamasında, react-dropzone dahil, PDF’leri ve fotoğrafları yüklemeden önce küçültün; yükleme işleyicinizi değiştirmenize gerek yok.

Kurulacak bir React paketi yok: betiği bir kez yükleyin ve bir öznitelik ekleyin. Yardımcı, dosyayı React’ten önce yakalar ve küçültülmüş dosyayı onChange veya onDrop işleyicinize verir.

1. Betiği yükleyin

index.html içinde veya Next.js kullanıyorsanız kök düzeninizde (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. Dosya girişi

JSX

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

3. react-dropzone

Özniteliği kök öğeye ekleyin. Hem bırakmayı hem de “gözat” için kullanılan gizli girişi kapsar.

JSX

const { getRootProps, getInputProps } = useDropzone({
  onDrop: (files) => upload(files[0]),   // küçültülmüş dosyayı alır
});

<div {...getRootProps({ 'data-pdfkind-max': '5MB' })}>
  <input {...getInputProps()} />
  Belgenizi buraya bırakın
</div>

Kendiniz çağırma

Yapıştırma, kamera veya özel bir seçiciden gelen dosyalar için:

JSX

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

İpucu. Dosyaları, çoğu kodun zaten yaptığı gibi olaydan okuyun (e.target.files veya onDrop işleyicisine iletilen dosyalar). Kodunuz hâlâ orijinal dosyayı alıyorsa Sorun giderme sayfasına bakın.

ÖncekiNasıl çalışır?Sonraki Vue

Son güncelleme: 3 Kasım 2026 · Sorularınız için: contact@pdfkind.com