FileDropzone

Ne zaman kullanılır

FileDropzone bir formda bir ya da birkaç dosya almak içindir: belge, görsel, içe aktarma dosyası.

Ne zaman kullanılmaz

• Yüklemenin kendisi için: FileDropzone dosyaları seçer ve listeler; yüklemeyi ve ilerlemeyi uygulama yönetir.
• Çok sayıda dosya için: yüzlerce dosyada bir tablo ve toplu işlemler gerekir.

Anatomi

Belgeler

Dosyaları buraya sürükleyin ya da

Dosya seçin

PDF ya da görsel, her biri en fazla 2 MB.

AçıkKoyu

Kodu kopyala

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

export default function Default() {
  return (
    <FileDropzone label="Belgeler" description="PDF ya da görsel, her biri en fazla 2 MB." accept="application/pdf,image/*" maxSize={2_000_000} multiple className="max-w-md" />
  );
}

1. Etiket: Dosya girişini adlandırır.
2. Alan: Kesikli kenarlık, simge, istem ve “Dosya seçin” düğmesi.
3. Açıklama: Kabul edilen türler ve boyut sınırı.
4. Hata: Reddedilen dosyaların nedenleri.
5. Liste: Ad, boyut ve Kaldır düğmesi.

Davranış

• “Dosya seçin” gerçek bir düğmedir ve dosya seçiciyi açar; klavyede ona odaklanıp Enter ya da Space’e basılır. Fareyle alanın tamamı da tıklanır.
• Dosya alanın üstüne sürüklenince kenarlık düzleşir, alan dolar ve hafifçe öne çıkar; simge yukarı kayar.
• accept, maxSize ve maxFiles dışındaki dosyalar eklenmez; her biri için neden yazılır ve onReject çağrılır.
• Aynı dosya iki kez eklenmez.
• Eklenen dosya sayısı ve kaldırılan dosya bir durum bölgesinden duyurulur.
• fileStatus ile her dosya satırı kendi durumunu gösterir: ilerleme çubuğu, “Yüklendi” ya da hata iletisi. Yeniden yükle düğmesi onRetry’ı o dosyayla çağırır.
• Yüklemeler bitince durum bölgesi özeti okur: kaç dosya yüklendi, kaç dosya yüklenemedi.

Yükleme davranışı

Bileşen hiçbir zaman ağ isteği yapmaz; yüklemeyi uygulama onUpload(file, signal) ile verir. Verildiğinde kabul edilen her dosya eklenir eklenmez yüklenmeye başlar ve her dosya kendi AbortSignal’ını alır. Yüklenirken Kaldır düğmesi “Yüklemeyi iptal et” olur: sinyali iptal eder ve satırı kaldırır. Söz bitince satır “Yüklendi” olur; reddedilirse Error mesajı dosyayla gösterilir ve Yeniden yükle onUpload’ı yeni bir sinyalle yeniden çağırır. fileStatus verilirse uygulamanın durumu (ör. ilerleme yüzdesi) bileşenin kendi durumunun yerine geçer. Reddedilen dosyalar (tür, boyut, sayı) onUpload’a hiç gelmez. onUpload verilmezse bileşen yalnızca dosya seçer ve denetler; dosyaları form gönderir. Toplu ödeme dosyaları yalnızca text/csv kabul eder ve yüklendikten sonra sunucu denetler; bir yükleme hiçbir zaman para hareket ettirmez.

Yönergeler

• Kabul edilen türleri ve boyutu açıklamada yazın; kullanıcı reddedilene kadar beklemesin.
• Dokunmatik cihazlarda sürükleme yoktur; “Dosya seçin” düğmesi dosya seçiciyi açar.
• Yükleme sürerken ilerlemeyi listenin yanında gösterin ve gönder düğmesini bekletin.

İçerik

Türkçe	İngilizce
Dosyaları buraya sürükleyin ya da	Drag files here or
Dosya seçin	Choose files
Yüklemeyi iptal et: {name}	Cancel upload of {name}
Yüklenemedi	Upload failed
{done} / {total} dosya yüklendi	{done} of {total} files uploaded
Eklemek için bırakın	Drop to add
Kaldır: {name}	Remove {name}
{name}: bu dosya türü kabul edilmiyor	{name}: this file type is not accepted
{name}: dosya en fazla {size} olabilir	{name}: the file can be at most {size}
En fazla {count} dosya ekleyebilirsiniz	You can add at most {count} files

İlgili bileşenler

• Field: Etiket, açıklama ve hata düzeni.