Form · File upload

Dosya yükleme

Kullanıcının cihazından bir veya daha çok dosya seçmesini sağlar. Sürükle ve bırak alanı ve dosya listesi ile.

CSS: kararlı
JavaScript: sürükle, listele, kaldır
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek

İkametgâh belgesi

PDF veya JPG. En çok 5 MB.

veya dosyayı buraya sürükleyin

HTML kodunu göster

<div class="kiris-alan" data-kiris="dosya">
  <label class="kiris-etiket" for="ek">İkametgâh belgesi</label>
  <p class="kiris-yardim" id="ek-yardim">PDF veya JPG. En çok 5 MB.</p>
  <div class="kiris-dosya-alani">
    <input class="kiris-dosya" id="ek" name="ek" type="file" accept=".pdf,.jpg,.jpeg" aria-describedby="ek-yardim">
    <span class="kiris-button kiris-button--ikincil kiris-dosya-alani__dugme" aria-hidden="true">Dosya seç</span>
    <p class="kiris-dosya-alani__metin">veya dosyayı buraya sürükleyin</p>
  </div>
  <ul class="kiris-dosya-liste" aria-label="Seçilen dosyalar"></ul>
  <p class="kiris-dosya-durum kiris-gorsel-gizli" aria-live="polite"></p>
</div>

Ne zaman kullanılır

Belge, fotoğraf veya form eki istediğinizde kullanın.
Kabul edilen biçimi ve en büyük boyutu etiketin altında yazın.

Erişilebilirlik

Yerel girdi görünmez ama vardır ve odak alır. Klavye ve ekran okuyucu onu kullanır. Sürükle ve bırak tek yol değildir.
Seçilen her dosya adı ve boyutu ile listelenir. Her satırda kaldırma düğmesi vardır.
Seçim aria-live ile duyurulur: "2 dosya seçildi".
Kabul edilen biçim ve en büyük boyut yardım metninde yazılır. Sunucu yine denetler.

Karşılanan WCAG 2.2 ölçütleri 1.3.1 2.1.1 3.3.2 4.1.3

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: UK, US, FR, IE, KR, JP, DK, DE.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-file-upload ile başlayan sınıflar
Davranış betiği, data-kiris="dosya" başlatıcısı