تخطي إلى المحتوى الرئيسي

Dropup

مكتبة React خفيفة وبدون واجهة لرفع الملفات

npm versionbundle sizelicense
10KB

خفيف الوزن

الحزمة الأساسية أقل من 10KB مضغوطة. قابلة للتجزئة للحجم الأمثل.

TS

TypeScript

مكتوبة بـ TypeScript مع تعريفات أنواع شاملة.

0

بدون تبعيات

لا تبعيات في وقت التشغيل. تتطلب فقط 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>
);
}