اختيار الملفاتFileUpload

اختيار ملفات مع فحص النوع والحجم وإزالة الاختيار.

المصدر
اختر طرازكاستكشف الثيمات

اسحب ملفاتك هنا، أو اخترها من جهازك

.pdf,.png,.jpg,.jpeg — 5 ميجابايت لكل ملف

تجربة اختيار ملفات محليًا. لا تُرفع الملفات إلى أي خادم.

أضفه إلى مشروعك

نفّذ الأمر داخل مشروعك لإضافة المكوّن مباشرة من الرابط. يتولى المثبّت إضافة ملفات الحزمة وعددها 6، بما فيها الثيمات والاعتماديات.

Terminal
pnpm dlx shadcn@latest add https://tirazkit.moud4477.chatgpt.site/r/file-upload.json

يتطلب التثبيت المباشر رابطًا متاحًا دون تسجيل دخول، ومشروعًا مهيّأً لاستخدام المكتبة. دليل التثبيت الكامل

التثبيت من ملف محلي

إذا كانت نسختك من السجل خاصة، نزّل الحزمة إلى مجلد مشروعك ثم ثبّتها من الملف.

تنزيل حزمة المكوّن
Terminal
pnpm dlx shadcn@latest add ./file-upload.json

الاستخدام

المكوّن يرث الألوان والاتجاه من مزوّد الثيم. غيّر قيمة الثيم لتستخدم نفس الكود بهوية مختلفة.

example.tsx
"use client";
import { useState } from "react";
import { Theme } from "@/components/tirazkit/theme";
import { FileUpload } from "@/components/tirazkit/file-upload";

export default function Example() {
  const [files, setFiles] = useState<File[]>([]);
  return (
    <Theme theme="dga" locale="ar">
      <FileUpload label="المرفقات" accept=".pdf,.png,.jpg" maxSizeMB={5} onFilesChange={setFiles} />
    </Theme>
  );
}

الخصائص الأساسية

الخاصيةالنوعالقيمة الافتراضية
labelstringمطلوب
maxSizeMBnumber5
acceptstring.pdf,.png,.jpg,.jpeg
onFilesChange(files: File[]) => void—

إرشادات الاستخدام

المكوّن يختار الملفات ويفحص نوعها وحجمها داخل المتصفح. اربط onFilesChange بخدمتك الخاصة، وتحقق من الملفات على الخادم قبل تخزينها.