FileDropzone

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { FileDropzone } from '@bigbang/ui';

Kaynak

FileDropzone.tsx

Storybook

FileDropzone · Playground

FileDropzone, @bigbang/ui paketindedir.

import { FileDropzone } from '@bigbang/ui';

<FileDropzone label="Belgeler" accept=".pdf" maxSize={2_000_000} multiple files={files} onFilesChange={setFiles} />;

acceptsFile(file, accept) ve formatBytes(bytes, locale) yardımcıları da dışa aktarılır.

Özellikler

labelZorunlu

Açıklama

Alanın üstündeki görünen etiket; dosya girişini adlandırır.

Tür

string

description

Açıklama

İstemin altındaki yardım, ör. kabul edilen türler ve boyut sınırı. aria-describedby ile bağlanır.

Tür

ReactNode

error

Açıklama

Verilirse alan geçersiz olur ve mesaj okunur. Verilmezse reddedilen dosyalar yerleşik mesajlar alır.

Tür

string

required

Açıklama

Dosya zorunludur: etiket işaretlenir ve giriş bunu bildirir.

Tür

boolean

Varsayılan

false

accept

Açıklama

<input type='file'> gibi kabul edilen türler: MIME türleri, tür/* ya da .pdf gibi uzantılar.

Tür

string

multiple

Açıklama

Birden çok dosyaya izin verir.

Tür

boolean

Varsayılan

false

maxSize

Açıklama

Bayt olarak en büyük dosya boyutu; daha büyük dosyalar mesajla reddedilir.

Tür

number

maxFiles

Açıklama

Listenin alabileceği en çok dosya; fazlası mesajla reddedilir.

Tür

number

files

Açıklama

Kontrol ettiğinizde seçilen dosyalar. onFilesChange ile birlikte verin.

Tür

readonly File[]

onFilesChange

Açıklama

Dosya eklenince ya da kaldırılınca yeni listeyle çağrılır.

Tür

(files: File[]) => void

onReject

Açıklama

Eklenmeyen dosyalar ve nedenleriyle çağrılır.

Tür

(rejections: FileRejection[]) => void

disabled

Açıklama

Bırakmayı, seçmeyi ve kaldırmayı kapatır.

Tür

boolean

Varsayılan

false

fileStatus

Açıklama

Her dosyanın yükleme durumunu döndürür: yükleniyor (ilerlemeyle), yüklendi ya da hata (iletiyle).

Tür

(file: File) => FileUploadStatus

onRetry

Açıklama

Hatalı dosyanın yeniden yüklenmesi istenince çağrılır; bu ya da onUpload verildiğinde hatalı dosyalarda bir yeniden yükle düğmesi görünür.

Tür

(file: File) => void

onUpload

Açıklama

Kabul edilen bir dosyayı yükler; bileşen kendisi ağ isteği yapmaz. Her dosya eklenir eklenmez ve yeniden denemede çağrılır. signal iptal olunca isteği durdurun: dosyayı kaldırmak yüklemesini iptal eder. Bitince çözülsün; hata mesajı dosyayla gösterilen bir Error ile reddedilsin. Reddedilen dosyalar (tür, boyut, sayı) buraya hiç gelmez. Verilmezse bileşen yalnızca dosya seçer ve denetler; dosyaları form gönderir.

Tür

(file: File, signal: AbortSignal) => Promise<unknown>

name

Açıklama

Alan adı; tarayıcı izin verdiğinde seçilen dosyalar formla gönderilir.

Tür

string

className

Açıklama

Kök öğeye eklenir; yalnızca yerleşim için kullanın.

Tür

string

Veri öznitelikleri

• data-component="file-dropzone": kök öğe üzerinde.
• data-part: label, zone, icon, prompt, trigger, description, error, list, item.
• Alanda data-dragging, data-invalid, data-disabled.
• Dosya satırında data-status (uploading, done, error). FileUploadStatus tipi dışa açılır.