Javascript İle Tarayıcı Tabanlı Dosya Önizleme Nasıl Yapılır?

Adım 1: Dosya Seçimi ve HTML Yapısını Hazırlama

Öncelikle kullanıcıdan dosya alacak arayüzü kurmamız gerekiyor. Aşağıdaki kod bloğu, kullanıcının bir görsel seçmesini sağlayan temel HTML yapısını sunmaktadır.

Burada accept="image/*" niteliği, kullanıcının sadece görsel dosyalarını seçmesini zorunlu kılar. Bu, kullanıcı deneyimi açısından oldukça önemlidir.

Adım 2: URL.createObjectURL ile Hızlı Önizleme

URL.createObjectURL yöntemi, seçilen dosya için tarayıcı belleğinde geçici bir URL oluşturur. Bu yöntem, büyük dosyalarda bile çok hızlıdır ve bellek yönetimi açısından oldukça verimlidir.

const dosyaSecici = document.getElementById('dosyaSecici');
const gorselOnizleme = document.getElementById('gorselOnizleme');

dosyaSecici.addEventListener('change', function(event) {
    const dosya = event.target.files[0];
    if (dosya) {
        const geciciURL = URL.createObjectURL(dosya);
        gorselOnizleme.src = geciciURL;
        gorselOnizleme.style.display = 'block';
    }
});

Bu kod bloğu, kullanıcı bir dosya seçtiği anda tetiklenir. event.target.files[0] ile seçilen ilk dosyaya erişilir ve bu dosyaya özel bir URL atanarak görselin src özelliğine verilir.

Adım 3: FileReader API ile Veri İşleme

Eğer dosya içeriğini bir Base64 string (metin tabanlı veri) olarak almanız gerekiyorsa FileReader sınıfını kullanmalısınız. Bu yöntem, görseli bir veri dizisi olarak okur ve genellikle sunucuya yüklemeden önce veriyi işlemek veya canvas üzerinde düzenlemek istediğinizde kullanılır.

const okuyucu = new FileReader();

okuyucu.onload = function(e) {
    gorselOnizleme.src = e.target.result;
    gorselOnizleme.style.display = 'block';
};

// Dosyayı Data URL olarak oku
if (dosyaSecici.files[0]) {
    okuyucu.readAsDataURL(dosyaSecici.files[0]);
}

readAsDataURL metodu, dosyayı base64 formatında kodlanmış bir string'e dönüştürür. Bu, özellikle küçük ikonlar veya profil fotoğrafları için oldukça yaygın bir yöntemdir.

Adım 4: Dosya Türü ve Boyut Kontrolü

Güvenlik ve performans açısından, kullanıcının yüklediği dosyanın türünü ve boyutunu önceden kontrol etmek zorunludur. Aşağıdaki örnek, 2MB'dan büyük dosyaları engelleyen bir yapı sunar.

const MAKS_BOYUT = 2 * 1024 * 1024; // 2MB

dosyaSecici.addEventListener('change', (e) => {
    const dosya = e.target.files[0];
    if (dosya.size > MAKS_BOYUT) {
        alert("Dosya boyutu çok büyük! Lütfen 2MB altı bir dosya seçin.");
        return;
    }
    // İşleme devam et...
});

Bu kontrol, sunucuya gereksiz yük binmesini engeller ve kullanıcının hatalı dosya yüklemesinin önüne geçer.

Karşılaştırma: Yöntemler Arasındaki Farklar

Adım 5: Bellek Yönetimi ve Temizlik

Kritik Uyarı: URL.createObjectURL ile oluşturulan her URL, tarayıcı belleğinde yer tutar. Eğer çok sayıda önizleme işlemi yapıyorsanız, eski URL'leri URL.revokeObjectURL(eskiURL) metodu ile temizlemeyi unutmayın. Aksi takdirde uygulamanız zamanla yavaşlayabilir.

let oncekiURL = null;

function onizle(dosya) {
    if (oncekiURL) URL.revokeObjectURL(oncekiURL);
    oncekiURL = URL.createObjectURL(dosya);
    gorselOnizleme.src = oncekiURL;
}

Bu yapı, her yeni seçimde eski belleğin boşaltılmasını sağlar. Bu, özellikle SPA (Single Page Application) mimarilerinde performans için hayati önem taşır.

Sıkça Sorulan Sorular

Dosya önizleme güvenli midir?

Evet, bu işlemler tamamen tarayıcı tarafında gerçekleştiği için güvenlidir. Ancak, önizlenen dosyayı sunucuya gönderirken mutlaka sunucu tarafında dosya türü (MIME type) ve içerik kontrolü yapmalısınız.

PDF dosyalarını önizleyebilir miyim?

Evet, aynı yöntemle PDF dosyalarını bir veya etiketi içerisine yükleyerek önizleyebilirsiniz.

Neden FileReader yerine createObjectURL tercih etmeliyim?

Performans önceliğiniz varsa createObjectURL çok daha hızlıdır çünkü dosyayı okumaya çalışmaz, sadece bir referans oluşturur.

Çoklu dosya seçimi nasıl yapılır?

Input etiketine multiple niteliğini ekleyerek event.target.files üzerinden bir döngü ile tüm dosyaları işleyebilirsiniz.

Tarayıcı desteği nasıldır?

Güncel tüm modern tarayıcılar (Chrome, Firefox, Safari, Edge) 2026 itibarıyla bu API'leri tam desteklemektedir.

Yasal Uyarı ve Sorumluluk Reddi: Bu makaledeki kod örnekleri eğitim amaçlıdır. Uygulamanızda dosya yükleme işlemleri yaparken, XSS (Cross-Site Scripting) saldırılarına karşı kullanıcı girdilerini filtrelemeyi ve sunucu tarafında dosya doğrulama (validation) süreçlerini mutlaka uygulamayı unutmayın. Güvenlik, istemci tarafında değil, sunucu tarafında kesinleştirilmelidir.

İleri Seviye İpuçları: Dosya Önizlemede Performans Optimizasyonu

Büyük boyutlu görsellerin önizlenmesi, özellikle mobil cihazlarda tarayıcı performansını ciddi oranda etkileyebilir. Kullanıcı 10MB boyutunda bir fotoğraf yüklediğinde, bunu doğrudan DOM'a eklemek bellek sızıntılarına ve arayüz donmalarına yol açabilir. Bu süreci optimize etmek için "Lazy Loading" ve "Canvas Downsampling" tekniklerini kullanmalısınız.

Özellikle çoklu dosya yükleme senaryolarında, her görseli tam çözünürlükte işlemek yerine, tarayıcı üzerinde bir Canvas kullanarak görseli yeniden boyutlandırıp önizleme oluşturmak en sağlıklı yöntemdir.

function createThumbnail(file, maxWidth = 200) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const scale = maxWidth / img.width;
        canvas.width = maxWidth;
        canvas.height = img.height * scale;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        resolve(canvas.toDataURL('image/jpeg', 0.7));
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
}

Alternatif Kütüphane Kullanımı: Dropzone.js ve FilePond

Kendi önizleme mantığınızı yazmak esneklik sağlasa da, karmaşık formlar ve sürükle-bırak (drag-and-drop) özellikleri için hazır kütüphaneler kullanmak geliştirme süresini kısaltır. FilePond, özellikle dosya yükleme süreçlerini görselleştirmek ve önizlemek için endüstri standardı haline gelmiş, oldukça özelleştirilebilir bir kütüphanedir.

Neden Hazır Kütüphane Tercih Etmelisiniz?

• Gelişmiş UI/UX: Dosya yükleme ilerleme çubukları ve hata mesajları hazır gelir.
• Görüntü İşleme: İstemci tarafında otomatik kırpma, döndürme ve boyutlandırma desteği sunar.
• Cross-Browser Uyumluluğu: Eski tarayıcılarda yaşanabilecek uyumsuzlukları otomatik olarak yönetir.
• Ekosistem: React, Vue ve Angular gibi modern framework'ler için özel bileşenleri mevcuttur.

Eğer uygulamanız sadece basit bir önizlemeden fazlasını gerektiriyorsa (örneğin; yükleme öncesi görsel düzenleme), kendi kodunuzu yazmak yerine bu kütüphanelerin sunduğu API'leri kullanmak, bakım maliyetini uzun vadede düşürecektir.

Dosya Önizleme Süreçlerinde Hata Ayıklama (Debugging)

Dosya önizleme hataları genellikle "Blob" URL'lerinin geçersiz olması veya dosya türü kısıtlamalarından kaynaklanır. Hata ayıklama yaparken şu adımları izlemek süreci hızlandırır:

1. Console Logs: input.files nesnesinin içeriğini kontrol ederek dosyanın gerçekten seçilip seçilmediğini doğrulayın.
2. Network Tab: Eğer bir API üzerinden dosya çekiyorsanız, dönen MIME tipinin doğru olup olmadığını (örneğin image/png yerine text/html dönmesi) inceleyin.
3. Memory Profiling: Chrome DevTools içerisindeki "Memory" sekmesini kullanarak, büyük dosyalar sonrası bellek kullanımının URL.revokeObjectURL ile düşüp düşmediğini takip edin.

Pro İpucu: Kullanıcıya "Dosya önizlenemedi" gibi genel hatalar vermek yerine, dosya boyutunun çok büyük olması veya desteklenmeyen format gibi spesifik hata mesajları sunmak, kullanıcı deneyimini (UX) doğrudan iyileştirir.

Sonuç

Javascript ile tarayıcı tabanlı dosya önizleme yapmak, modern web geliştirme süreçlerinde artık bir standart haline gelmiştir. URL.createObjectURL ve FileReader API'lerini kullanarak kullanıcılarınıza akıcı ve profesyonel bir deneyim sunabilirsiniz. Bellek yönetimine dikkat ederek ve güvenlik kontrollerini ihmal etmeyerek, ölçeklenebilir uygulamalar geliştirebilirsiniz.

Bir sonraki adım olarak, seçilen dosyaları bir üzerinde düzenlemeyi veya kırpmayı (crop) deneyebilir, ardından bu veriyi FormData nesnesi ile sunucuya asenkron (Fetch API) olarak göndermeyi öğrenebilirsiniz.