Drag & drop bölgesi — default, hover, active drop, error durumları. Tek dosya ve çoklu yükleme; progress bar'lı liste, kabul edilen tipler ve menü ürün foto upload örneği.
01 · Drop zone durumları
Default · Hover · Active drop · Error — border, fill ve ikon rengi durumla değişir
Default
Sürükleyip bırak veya cihazdan seç
JPG, PNG, WebP · Maks. 5 MB
Hover (drag over)
Bırakmak için kursörü buraya getir
Dosya tipini kontrol ediyoruz
Active drop
Şimdi bırakabilirsin
3 dosya — toplam 4,2 MB
Error
Bu tip dosya kabul edilmiyor
Sadece JPG, PNG ve WebP yüklenebilir.
02 · Tek dosya — kompakt
Profil fotoğrafı veya logo gibi tek alan girişleri için yatay düzen
Dosyalar paralel yüklenir — başarılı, devam eden, hatalı ve iptal edilebilir öğeler birlikte gösterilir
Sürükleyip bırak veya cihazdan seç
JPG, PNG, WebP, PDF · Tek dosya en fazla 10 MB · Toplam 50 MB
4 başarılı↑ 2 yükleniyor! 1 hata
margerita-pizza-orta.jpg
1,2 MB · yüklendi
JPG
tatli-menusu-2026.jpg
3,8 MB· 1.4 MB/sn· 2 sn kaldı
68%
PDF
menu-fiyat-listesi-mayis.pdf
2,1 MB· 0,9 MB/sn
24%
!
menu-foto-cok-buyuk.heic
HEIC formatı desteklenmiyor — JPG'ye dönüştürerek tekrar dene
izgara-kebap-tabagi.webp
784 KB · yüklendi
04 · Menü ürün fotoğrafı kullanımı
Ürün düzenleme ekranında 1 ana foto + 3 alternatif slot, drag-reorder ile sıralanır
Margerita Pizza · Orta boy
Müşteri menüsünde ilk foto kapak olarak görünür. WhatsApp önizlemesi 600×600 oranını kullanır.
Foto sürükle veya cihazdan seç
En fazla 4 foto · JPG, PNG, WebP · 600×600+ önerilir · Tek dosya 5 MB
KAPAK
2 / 4
3 / 4
Yapı kuralları
· Drop zone: 1.5px dashed var(--border-strong), radius 10px, padding 28px 24px. Hover state'inde --primary kenar + tone-100 fill.
· Active drop: dashed yerine solid 1.5px + tone-100 fill + check ikon. Mobil/touch için tap → file picker.
· Error: --danger kenar + tone-50 fill + uyarı ikonu. Sebep dropzone alt metninde Türkçe yazılır (mime type, boyut, sayı).
· Boyut limit: tek dosya 10 MB (default), toplam 50 MB. Görsel için 5 MB önerilir.
· Kabul edilen tipler her dropzone'da metin olarak listelenir; accept attribute mime type ile.
· Liste öğesi: 36×36 thumb (ikon veya görsel ön-izleme), isim + meta + 4px progress bar. Yüklendi → check, hata → kırmızı thumb.
· Progress: --primary dolgu, border-radius: 999px. % değer sağda monospace, hız + kalan süre gri meta.
· İptal/sil: tek tıkla; silme silmeden önce onay sormaz, "geri al" toast'ı 5sn süreyle gösterilir.
· Sürükle-yeniden sırala: çoklu ürün fotosu gibi durumlarda, drag handle ile (cursor: grab).
· Erişilebilirlik: aria-label="Dosya yükle"; klavye ile dropzone üzerinde Enter / Space file picker'ı açar.