FileUpload
Sürükle-bırak alanlı bir dosya seçici. Klavye ve ekran okuyucu yolu içindeki “Dosya seç” butonudur; sürükleyip bırakmak fare için bir kısayoldur. Dosyalar tutulmadan önce accept, boyut ve sayı açısından kontrol edilir.
Dosyaları buraya sürükle
PNG, JPG ya da PDF; her biri en fazla 2 MB. En fazla üç dosya.
<Field label="Ekler" error={error}>
<FileUpload
label="Dosyaları buraya sürükle"
buttonLabel="Dosya seç"
getRemoveLabel={(file) => file.name + " dosyasını kaldır"}
getStatusText={(count) => count + " dosya seçildi"}
locale="tr-TR"
multiple
maxFiles={3}
maxSize={2_000_000}
accept="image/*,.pdf"
description="PNG, JPG ya da PDF; her biri en fazla 2 MB. En fazla üç dosya."
value={files}
onValueChange={setFiles}
onReject={(rejections) => setError(describe(rejections))}
name="attachments"
/>
</Field>Import
import { FileUpload, type FileRejection } from "@meridui/react";Örnekler
Tek dosya
multiple olmadan yeni dosya eskisinin yerine geçer.
Bir görsel sürükle
<Field label="Profil fotoğrafı">
<FileUpload accept="image/*" label="Bir görsel sürükle" buttonLabel="Görsel seç" onValueChange={(files) => setFile(files[0] ?? null)} />
</Field>Devre dışı
Dosyaları buraya sürükle
Yüklemeler duraklatıldı.
<FileUpload disabled description="Yüklemeler duraklatıldı." />Yükleme
FileUpload yalnızca dosya seçtirir. Dosyaları onValueChange içinden gönder (ya da form submit'inde: name verildiğinde tutulan dosyalar gerçek <input type="file">'a yansıtılır) ve ilerlemeyi Progress ile göster.
API referansı
Bir div render'lar; diğer div attribute'ları ve ref ona gider.
| Prop | Tip | Varsayılan | Açıklama |
|---|---|---|---|
value / defaultValue | File[] | – | Controlled ya da başlangıç dosyaları. |
onValueChange | (files: File[]) => void | – | Her ekleme ya da kaldırmadan sonra tutulan tüm dosyalarla çağrılır. |
onReject | (rejections: FileRejection[]) => void | – | Kontrolden geçemeyen dosyalar ve nedenleri: file-invalid-type, file-too-large, file-too-small, too-many-files. |
accept | string | – | <input type="file">'daki gibi: "image/*,.pdf". Bırakılan dosyalarda da kontrol edilir. |
multiple | boolean | false | Birden çok dosya tutar. |
maxSize / minSize | number | – | Byte cinsinden boyut sınırları. |
maxFiles | number | – | multiple ile tutulan en fazla dosya sayısı. |
label | ReactNode | "Drag and drop files here" | Alandaki ana satır. Türkçe arayüzde "Dosyaları buraya sürükle". |
buttonLabel | ReactNode | "Browse files" | Butonun metni. Türkçe arayüzde "Dosya seç". |
description | ReactNode | – | Etiketin altındaki ipucu; butonu açıklar. |
showFileList | boolean | true | Kaldır butonlu dosya listesini render'lar. |
getRemoveLabel | (file: File) => string | Remove {name} | Kaldır butonunun erişilebilir adı. |
getStatusText | (count: number) => string | "N file(s) selected" | Seçim değişince okunan metin. |
locale | string | – | Dosya boyutları için locale (Intl birimleri). |
icon | ReactNode | – | Etiketin üstündeki ikon. |
invalid / disabled / required | boolean | – | Durumlar; Field içinde ondan gelir. |
name | string | – | Native form submit için dosya input'unun adı. |
Stil verme
| Sınıf | Eleman |
|---|---|
.mrd-file-upload | Kök (data-dragging, data-invalid, data-disabled) |
.mrd-file-upload__dropzone | Kesikli bırakma alanı |
.mrd-file-upload__icon, __label, __description, __button | Alanın içeriği |
.mrd-file-upload__list, __item, __name, __size, __remove | Dosya listesi |
Erişilebilirlik
Sürükle-bırakın klavye karşılığı yoktur; bu yüzden bırakma alanı focus almaz, içindeki buton alır. Buton description ile açıklanır ve Field içinde önce kendi görünen metni, sonra alan etiketiyle adlandırılır. Dosya eklemek ya da kaldırmak görsel olarak gizli bir role="status" bölgesini günceller (“2 dosya seçildi”). Bir dosyayı kaldırmak focus'u “Dosya seç” butonuna döndürür.
| Tuş | Ne yapar |
|---|---|
| Tab | Önce buton, sonra her kaldır butonu. |
| EnterSpace | Butonda: dosya seçiciyi açar. Kaldır butonunda: o dosyayı kaldırır. |