رفع الملفات
سطح رفع ملفات قابل للسحب والإفلات ويمكن الوصول إليه بلوحة المفاتيح، مع التحقق من الامتداد وحجم الملف، ومؤشر تقدم متحرك على المحيط، واستدعاء عند الاكتمال لربط طبقة التخزين الخاصة بك.
اسحب وأفلت للرفع أو تحديد
PDF, JPG, PNG, XLSX (الحد الأقصى 8 MB)
جارٍ الرفع ...
تم الرفع بنجاح!
التثبيت
يمكنك إضافة مكوّن رفع الملفات باستخدام CLI الخاص بنا أو يدويًا:
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.
npx boardui@latest add file-uploadهل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
التحقق من الصحة
تهيئة أنواع الملفات المقبولة باستخدام allowedExtensions والحد الأقصى للحجم مع maxBytes. يُحدّث المكوّن نص المساعدة ورسالة الرفض الخاصة به من تلك الخصائص.
<FileUpload allowedExtensions={["pdf", "png"]} maxBytes={4 * 1024 * 1024} onUploadComplete={saveFile}/>أيقونة الملف
تتبع الأيقونة المدمجة الامتداد المحدد. استخدم renderFileIcon عندما يمتلك منتجك أعمالًا فنية خاصة بنوع الملف أو نظام أيقونات خاص به.
import { RiFileCloudLine } from "@remixicon/react";
<FileUpload renderFileIcon={() => ( <RiFileCloudLine className="size-6 text-foreground-icon-secondary" aria-hidden /> )}/>