ناحیهٔ آپلود فایل (FileDropzone)

کشیدن و رها کردن یا انتخاب فایل، با بررسی نوع و حجم و پیش‌نمایش جدولی CSV.

معرفی

FileDropzone تنها سطح آپلود پرتو است. کاربر فایل را روی آن رها می‌کند یا با کلیک و صفحه‌کلید انتخاب می‌کند. نوع (accept) و حجم (maxSize) را خودِ کامپوننت بررسی می‌کند: فایل ردشده با دلیلش زیر ناحیه فهرست می‌شود و هرگز به onFiles نمی‌رسد. با preview="table" چند سطر اول فایل CSV یا TSV در جدول نشان داده می‌شود تا کاربر پیش از ورود داده ببیند چه چیزی وارد می‌کند.

چه زمانی استفاده نکنیم:

  • برای نشان دادن پیشرفت ورود یا خروجی‌گرفتن — از TaskProgress استفاده کنید

استفاده

import { FileDropzone } from '@partodata/ui/file-dropzone'

export function ImportComments() {
  return (
    <FileDropzone
      accept=".csv,.tsv"
      maxSize={5 * 1024 * 1024}
      preview="table"
      hint="فقط CSV یا TSV، حداکثر 5 مگابایت"
      onFiles={([file]) => startImport(file)}
    />
  )
}

Props

FileDropzoneProps

Prop

Type

دسترسی‌پذیری

  • ناحیه یک button است و با Tab و Enter پنجرهٔ انتخاب فایل را باز می‌کند
  • خطاهای نوع و حجم با role="alert" اعلام می‌شوند

کامپوننت‌های مرتبط

  • TaskProgress — نمایش پیشرفت کاری که بعد از آپلود شروع می‌شود