React

صغّر ملفات PDF والصور قبل الرفع في تطبيق React، بما في ذلك react-dropzone، دون تغيير معالج الرفع لديك.

لا حاجة إلى تثبيت أي حزمة React: حمّل البرنامج النصي مرة واحدة وأضف سمة. يلتقط المساعد الملف قبل React ويمرّر الملف المصغّر إلى onChange أو onDrop.

1. حمّل البرنامج النصي

في index.html، أو في التخطيط الجذري (root layout) عند استخدام 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. حقل ملف

JSX

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

3. react-dropzone

ضع السمة على العنصر الجذري. فهي تشمل الإفلات وحقل الإدخال المخفي الذي يستخدمه زر «استعراض».

JSX

const { getRootProps, getInputProps } = useDropzone({
  onDrop: (files) => upload(files[0]),   // يتلقى الملف المصغّر
});

<div {...getRootProps({ 'data-pdfkind-max': '5MB' })}>
  <input {...getInputProps()} />
  أفلِت مستندك هنا
</div>

الاستدعاء بنفسك

للملفات القادمة من اللصق أو الكاميرا أو أداة اختيار مخصصة:

JSX

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

نصيحة. اقرأ الملفات من الحدث (e.target.files أو الملفات الممرَّرة إلى onDrop)، كما تفعل معظم الشيفرات أصلًا. وإذا ظلت شيفرتك تتلقى الملف الأصلي، فراجع استكشاف الأخطاء وإصلاحها.

السابقآلية العمل التالي Vue

آخر تحديث: 3 نوفمبر 2026 · للأسئلة: contact@pdfkind.com