File Upload

التثبيتنسخ رابط العنوان

ويثبّت Field أيضًا.

الاستخدامنسخ رابط العنوان

import { Field, FieldLabel } from "@/components/ui/field";
import { FileUpload } from "@/components/ui/file-upload";

export function DocumentsField() {
  return (
    <Field name="documents">
      <FieldLabel>المستندات الداعمة</FieldLabel>
      <FileUpload
        accept=".pdf,.jpg,.png"
        maxSize={5 * 1024 * 1024}
        maxFiles={3}
        hint="PDF أو JPG أو PNG، حتى 5 MB للملف."
        onFilesAdded={(files) => files.forEach(upload)}
      />
    </Field>
  );
}

استخدم File Upload لإرفاق المستندات والصور بطلب. يختار المكوّن الملفات ويفحصها، وأنت ترفعها. مرّر onFilesAdded لبدء الرفع، ثم احتفظ بالقائمة في حالتك (files) وحدّث status وprogress لكل ملف. اذكر الصيغ المقبولة وحد الحجم في hint.

البنيةنسخ رابط العنوان

• منطقة الإفلات (<label> حول <input> للملفات): المنطقة المنقطة. والحقل هو عنصر التحكم القابل للتركيز.
• التلميح: الصيغ وحد الحجم.
• قائمة الملفات (<ul>): صف لكل ملف فيه أيقونة والاسم والحجم أو الحالة وزر إزالة.
• شريط التقدم (role="progressbar") أثناء رفع الملف.

أمثلةنسخ رابط العنوان

التحققنسخ رابط العنوان

تُفحص الملفات مقابل accept وmaxSize وmaxFiles. ويبقى الملف المرفوض في القائمة مع السبب، فلا يضيع بصمت. جرّب ملفًا أكبر من 5 MB أو ملف .exe. والدالة validateFiles() مصدَّرة إن احتجت الفحص نفسه في مكان آخر.

الحالاتنسخ رابط العنوان

تعرض القائمة ملفًا انتهى رفعه وملفًا يُرفع مع التقدم وملفًا مرفوضًا وملفًا ينتظر الرفع. ويمكن تعطيل منطقة الإفلات أو جعلها في حالة خطأ.

إظهار التقدمنسخ رابط العنوان

تحكّم في القائمة عبر files وonFilesChange، وحدّث الملف أثناء رفعه.

const [files, setFiles] = useState<UploadFile[]>([]);

<FileUpload
  files={files}
  onFilesChange={setFiles}
  onFilesAdded={(added) =>
    added.forEach((file) =>
      upload(file.file, (progress) =>
        setFiles((current) =>
          current.map((f) =>
            f.id === file.id
              ? { ...f, status: progress < 100 ? "uploading" : "done", progress }
              : f,
          ),
        ),
      ),
    )
  }
/>

RTLنسخ رابط العنوان

يبدأ رمز كل صف ونصه من اليمين، ويقع زر الإزالة على اليسار، ويمتلئ شريط التقدم من اليمين إلى اليسار. وتحتفظ أسماء الملفات باتجاهها (dir="auto" داخل <bdi>): الاسم العربي يُقرأ من اليمين إلى اليسار وreport.pdf من اليسار إلى اليمين. والأحجام والنسب المئوية بأرقام غربية من اليسار إلى اليمين.

إمكانية الوصولنسخ رابط العنوان

• منطقة الإفلات حقل ملفات أصلي، فهي قابلة للتركيز وتعمل بلوحة المفاتيح وتقنيات المساعدة. والسحب إضافة وليس الطريقة الوحيدة (WCAG 2.1.1).
• يحيط حد التركيز بالمنطقة كلها. والحد المتقطع بنسبة 3:1 أو أفضل؛ والسحب فوقها يضيف حدًا مصمتًا بلون العلامة وتظليلًا.
• يحمل كل زر إزالة اسم الملف («إزالة report.pdf»). وتُعلَن حالات الرفض في منطقة حيّة وتظهر في القائمة بأيقونة ونص.
• لشريط التقدم role="progressbar" مع aria-valuenow؛ وتُكتب النسبة المئوية بجانبه أيضًا.
• ترجم messages في الصفحات العربية.

مرجع APIنسخ رابط العنوان

الاختلافات عن DGAنسخ رابط العنوان

• مكوّن واحد لنسختي الملف الواحد والملفات المتعددة في Figma، ومنطقة الإفلات فيه حقل ملفات حقيقي.
• تبقى الملفات المرفوضة في القائمة مع السبب.
• تحتفظ أسماء الملفات العربية باتجاهها.

التبايننسخ رابط العنوان