React

Perkecil PDF dan foto sebelum diunggah di aplikasi React, termasuk react-dropzone, tanpa mengubah handler unggah Anda.

Tidak ada paket React yang perlu dipasang: muat script sekali dan tambahkan sebuah atribut. Asisten menangkap file sebelum React menerimanya, lalu memberikan file yang sudah diperkecil ke onChange atau onDrop Anda.

1. Muat script

Di index.html, atau di root layout jika memakai 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. Input file

JSX

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

3. react-dropzone

Pasang atributnya pada elemen root. Atribut ini mencakup drop file sekaligus input tersembunyi yang dipakai tombol “browse”.

JSX

const { getRootProps, getInputProps } = useDropzone({
  onDrop: (files) => upload(files[0]),   // menerima file yang sudah diperkecil
});

<div {...getRootProps({ 'data-pdfkind-max': '5MB' })}>
  <input {...getInputProps()} />
  Letakkan dokumen Anda di sini
</div>

Memanggilnya sendiri

Untuk file dari paste, kamera, atau pemilih file kustom:

JSX

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

Tips. Baca file dari event (e.target.files atau file yang diteruskan ke onDrop), seperti yang sudah dilakukan sebagian besar kode. Lihat Pemecahan masalah jika kode Anda masih menerima file asli.

SebelumnyaCara kerja Berikutnya Vue

Terakhir diperbarui 3 November 2026 · Ada pertanyaan? contact@pdfkind.com