خفيف الوزن
الحزمة الأساسية أقل من 10KB مضغوطة. قابلة للتجزئة للحجم الأمثل.
TypeScript
مكتوبة بـ TypeScript مع تعريفات أنواع شاملة.
بدون تبعيات
لا تبعيات في وقت التشغيل. تتطلب فقط React كتبعية نظيرة.
الميزات
تصميم بدون واجهة
لا توجد مكونات واجهة مدمجة. لديك السيطرة الكاملة على المظهر والإحساس. قم ببناء تجربة الرفع التي تريدها بالضبط.
السحب والإفلات
اختيار ملفات بديهي بالسحب والإفلات مع ملاحظات بصرية لأنواع الملفات الصالحة وغير الصالحة أثناء السحب.
تقدم الرفع
تتبع التقدم في الوقت الفعلي للملفات الفردية والتقدم الإجمالي للرفع. قم ببناء مؤشرات تقدم جميلة.
التحقق من الملفات
تحقق مدمج من أنواع الملفات والأحجام والأبعاد. أضف قواعد تحقق مخصصة لاحتياجاتك الخاصة.
التخزين السحابي
ارفع مباشرة إلى S3 و Google Cloud Storage و Azure Blob والمزيد باستخدام روابط URL موقعة مسبقاً. لا حاجة لوكيل خادم.
الرفع المجزأ
قسّم الملفات الكبيرة إلى أجزاء للرفع الموثوق. دعم للرفع القابل للاستئناف مع بروتوكول tus.
معالجة الصور
ضغط وتغيير حجم وقص الصور قبل الرفع. إصلاح مشاكل اتجاه EXIF تلقائياً.
React Native
يعمل في React Native مع المحول الأصلي. نفس واجهة API لتطبيقات الويب والجوال.
آمن لـ SSR
يعمل بسلاسة مع Next.js و Remix وأطر عمل SSR الأخرى. لا مشاكل في الترطيب.
البداية السريعة
1. التثبيت
npm install @samithahansaka/dropup
2. الاستخدام
import { useDropup } from '@samithahansaka/dropup';
function Uploader() {
const { files, actions, getDropProps, getInputProps } = useDropup({
accept: 'image/*',
upload: { url: '/api/upload' },
});
return (
<div {...getDropProps()}>
<input {...getInputProps()} />
<p>Drop files here</p>
{files.map(file => (
<div key={file.id}>
{file.name} - {file.progress}%
</div>
))}
<button onClick={() => actions.upload()}>Upload</button>
</div>
);
}