Dosya yükleme file upload

bilinen diğer adları file upload · dosya seçici · sürükle-bırak alanı

Böyle diyorsan: "dosya sürükleme alanı" · "belge ekleme kutusu" → bunun adı dosya yükleme.

Dosya seçtiren ya da sürükle-bırak kabul eden alan.

Dosya yükleme alanı, kullanıcının cihazından dosya almanın yoludur ve iki yüzü vardır: yerleşik dosya seçici (her yerde çalışır) ve sürükle-bırak hedefi (hızlıdır ama YALNIZ fareyle çalışır). Bu yüzden sürükle-bırak asla tek yol olamaz — her zaman altında tıklanabilir bir 'dosya seç' düğmesi bulunmalıdır. Parçanın asıl zorluğu görünüşünde değil zamanındadır: yükleme uzun sürer, başarısız olabilir, yarıda kesilebilir. Yüzde göstermeyen, iptal ettirmeyen ve hata durumunda ne olduğunu söylemeyen bir yükleme alanı, kullanıcıyı ekrana bakıp beklemeye mahkûm eder.

Kapsam: Bu madde dosyanın seçilmesini ve yüklenmesini kapsar. Yüklenen görselin kırpılması ya da düzenlenmesi ayrı bir iştir; yükleme sırasındaki yüzde göstergesi ise İlerleme Çubuğu maddesindedir.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı

⬆ Dosyayı buraya sürükle

Aşama aşama gezmek için okları ya da numaraları kullan.

YAPIM PROMPTU — AJANINA YAPIŞTIR

Sürükle-bırak yükleme ekle: kesikli alan + 'dosya seç' yedeği (accept=application/pdf, en çok 5 MB); sürüklerken alan vurgulansın; her dosya kartında ad+boyut+gerçek ilerleme yüzdesi; tür ve boyut client'ta ANINDA, sunucuda AYRICA doğrulansın (uzantı değil gerçek içerik/MIME); hata alan dosya sebebiyle işaretlenip tek başına yeniden denensin.

DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Yüklemem huysuz; klasikleri sırayla ele: (1) alana bırakınca tarayıcı PDF'i sayfa olarak açıyor (dragover'da preventDefault yok); (2) tür kontrolü yalnız uzantıya bakıyor — virus.exe → virus.pdf geçiyor (sunucu MIME/magic doğrulaması yok, GÜVENLİK); (3) boyut sınırı yalnız client'ta; (4) ilerleme çubuğu sahte animasyon — gerçek progress olayına bağlı değil, %90'da asılıyor; (5) çoklu yüklemede biri düşünce hepsi iptal oluyor. Belirti şu:

ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)

1Bırakma alanıdragover + preventDefault
Kesikli çerçeveli hedef; preventDefault çağrılmazsa tarayıcı dosyayı SAYFA olarak açar.
2Dosya seçiciinput type=file accept
Tıkla-seç yedeği; accept mobilde doğru kaynağı açar (image/* kamerayı önerir).
3Dosya kartı + ilerlemeprogress event
Seçilen her dosya: ad + boyut + GERÇEK yüzde (upload progress olayından, sahte animasyon değil).
4Hata + tekrar denetür/boyut reddi
Reddedilen dosya SEBEBİYLE listelenir ('5 MB sınırı') ve tek başına yeniden denenebilir.

DURUMLAR — HANGİ HÂLDE NE OLUR

ABoşinput type=file
Henüz dosya yok. Kabul edilen türler ve boyut sınırı ÖNCEDEN yazılmalı: kullanıcı 40 MB'lık videoyu yükledikten sonra reddedilmemeli.
BSürükleniyordragover + preventDefault
Dosya alanın üstünde. preventDefault çağrılmazsa tarayıcı dosyayı sayfa olarak açar ve kullanıcı formu kaybeder — bu parçanın klasik hatasıdır.
CYükleniyorprogress + iptal
Yüzde ilerliyor. Gerçek yüzde göster, sahte animasyon değil; ve iptal edilebilsin — yanlış dosyayı seçen kullanıcı beklemek zorunda kalmamalı.
DBaşarılıdosya listesi
Yüklendi. Dosya adı, boyutu ve kaldırma seçeneği görünür olmalı; 'yüklendi' yazıp dosyayı göstermemek güven vermez.
EHatalıtür / boyut / ağ
Üç ayrı sebep, üç ayrı mesaj. 'Yükleme başarısız' hiçbir şey söylemez: yanlış tür mü, çok mu büyük, bağlantı mı koptu?

KODDAKİ ADLARI

HTML	input type=file + accept	seçici + tür önerisi
JS	drop/dragover preventDefault + progress	gerçek sürükleme + gerçek yüzde
Güvenlik	sunucuda MIME/boyut doğrulama	client aldatılabilir

ERİŞİLEBİLİRLİK & SIK HATA

Sürükle-bırak asla tek yol olmasın. Sürükleme klavye ve çoğu yardımcı teknolojiyle yapılamaz; altında her zaman gerçek bir <input type="file"> ve tıklanabilir düğme bulunmalı.
Gizlenen dosya girdisinin etiketi olmalı. Yaygın desen input'u gizleyip düğme göstermektir; bu durumda düğme gerçekten input'u tetiklemeli ve erişilebilir adı taşımalı.
Yükleme durumunu duyur (role="status"): başlangıç, bitiş ve hata yalnız görsel bir çubukta kalırsa ekran okuyucu kullanıcısı ne olduğunu bilemez.
Kabul edilen tür ve boyutu önceden yaz; accept özniteliği bir kolaylıktır, kullanıcıya söylenen kuralın yerine geçmez.
Sunucuda MIME ve boyut doğrulaması yap. İstemci tarafı kontrol bir kullanılabilirlik özelliğidir, güvenlik önlemi değildir — atlanabilir.

SIK KARIŞTIRILANLAR

İlerleme çubuğundan farkı. Dosya yükleme alanı işin KENDİSİDİR, ilerleme çubuğu o işin ne kadar ilerlediğini gösteren parçadır. İkisi birlikte çalışır ama karıştırılınca ortaya sahte bir çubuk çıkar: gerçek yüzdeyi bilmeden animasyon oynatmak, kullanıcıya bilgi vermek değil onu oyalamaktır.

İlerleme çubuğu sayfasına git →

Boş durumdan farkı. Boş yükleme alanı bir DAVETTİR: ne yapılacağını, hangi türün kabul edildiğini ve sınırı söyler. Boş durum ise zaten var olan bir listenin boşluğunu anlatır. İkisi de 'burada bir şey yok' der ama biri eylem ister, diğeri durumu açıklar.

Boş durum sayfasına git →

KAYNAKLAR

standartMDN — input type="file" ↗
accept, multiple ve dosya listesinin nasıl okunduğu.
birincilWHATWG HTML — Forms ↗
Dosya girdisinin standarttaki tanımı ve gönderim davranışı.
standartW3C — WCAG 2.2, Labels or Instructions (3.3.2) ↗
Tür ve boyut kurallarının önceden söylenmesi şartı.

İLGİLİ PARÇALAR

İlerleme çubuğu progress bar Boş durum empty state Form alanı form field Kısa bildirim toast / snackbar

AYNI AİLEDE · GIRDI