FileDropzone

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Dosyaları alana sürükleyin ya da tıklayın. accept, maxSize ve multiple kuralları uygular; reddedilen dosyalar mesaj alır.

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" />
  );
}

Tek dosya

multiple olmadan yeni dosya eskisinin yerine geçer.

Profil fotoğrafı

Dosyaları buraya sürükleyin ya da dosya seçin

PNG ya da JPG, en fazla 1 MB.

AçıkKoyu

Kodu kopyala

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

export default function Single() {
  return (
    <FileDropzone label="Profil fotoğrafı" description="PNG ya da JPG, en fazla 1 MB." accept="image/png,image/jpeg" maxSize={1_000_000} className="max-w-md" />
  );
}

Durumlar

Zorunlu ve hatalı, devre dışı.

Belgeler* zorunlu

Dosyaları buraya sürükleyin ya da dosya seçin

En az bir belge ekleyin.

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 States() {
  return (
    <div className="flex max-w-md flex-col gap-xl">
      <FileDropzone label="Belgeler" error="En az bir belge ekleyin." required />
      <FileDropzone label="Belgeler" description="PDF ya da görsel, her biri en fazla 2 MB." disabled />
    </div>
  );
}

Yükleme durumu

fileStatus her dosya için yükleme durumunu döndürür: yükleniyor (progress ile ilerleme çubuğu), yüklendi (onay işareti) ya da hata (ileti). onRetry verildiğinde hatalı dosyanın yanında yeniden yükle düğmesi çıkar.

Canlı örnek, StorybookStorybook'ta aç

Açık ve koyu mod

Sürükleme sırasında alan birincil kenarlık ve seçili yüzey alır.

Açık

Belgeler

Dosyaları buraya sürükleyin ya da dosya seçin

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

Koyu

Belgeler

Dosyaları buraya sürükleyin ya da dosya seçin

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

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" />
  );
}