Sunucuya doysa yükleme(File Upload) işlemi, küçük boyutlu dosyalar için kısa zamanda sonuçlanan bir işlemdir. Birkaç KB veya MB boyutundaki dosyaların sunucuya yüklenmesi çok fazla zaman alamayacağından kullanıcı sabrını fazla zorlamaz. Ancak büyük boyutlu dosyaların yüklenmesi sırasında, yükleme işleminin kullanıcıya süreç olarak ifade edilmesi gerekmektedir. Aksi halde sunucudan uzun süre cevap alamayan kullanıcılar, internet tarayıcısının kilitlendiğini zannederek işlemi sonlandırabilir. Bu durumda yüklemi işlemi yarıda kesilir. Böyle durumların yaşanmaması için dosya yükleme sürecini bir şekilde kontrol altına alarak kullanıcıya işlemin hangi aşamada olduğunu grafiksel veya sözel bir şekilde bildirmemiz gerekmektedir. Tam da bu noktada imdadımıza javascript asenkron programlama yetişmektedir.
Javascript kullananların sıkça başvurduğu asenkron işlemler, dosya yükleme işleminde de etkili bir şekilde kullanıldığında geliştiriciye büyük kolaylık sağlamaktadır.
Dosya yükleme işlemini basit bir şekilde ifade edecek olursak bir form yardımıyla bilgisayarımızdan seçilen dosyaların (resim, müzik, video, veri, v.s) sunucuya aktarılmasıdır diyebiliriz. Bu kısa özetin ardından işlemin nasıl yapıldığına dair bir örnek uygulama göstermek faydalı olacaktır.
Örnek uygulama ile resimden anlaşıldığı üzere dosya yükleme süreci takip edilmektedir.
Kod tarafında Javascript ile yapılan işlem sadece XMLHttpRequest nesnesine ait olayların(events) yakalanmasıdır. XMLHttpRequest nesnesi süreci asenkron olarak işletmektedir. Belli durumları olaylar yardımıyla bize bildirmektedir. Örneğin Yükleme sürecini progress event ile, işlemin bittiğini load event ile yakalayabilmekteyiz.
this.ajax = new XMLHttpRequest();
this.ajax.upload.addEventListener("progress", onProgressChanged, false);
this.ajax.addEventListener("load", onFileUploadSuccess, false);
this.ajax.addEventListener("error", onFileUploadFailed, false);
Bu şekilde event’leri sıralayabiliriz. Arayüz (HTML) tarafında belirlenen progress bar, button gibi elementlerin güncellenerek sürecin kullanıcıya yansıtılması bize kalmıştır. Bu noktada çeşitli yöntemlerle çalışmak mümkündür. Doğrudan javascript tarafından DOM elementlere ulaşıp içerik güncellemesi yapabildiğimiz gibi, JQuery gibi kütüphaneler kullanabiliriz. Ben bu uygulamada MVVM(Model View ViewModel) prensibini de etkin şekilde kullanabilmek açısından Knockoutjs kütüphanesini kullandım.
Sunucu tarafında uygulama Asp.net MVC4 ile oluşturulmuştur. Sunucu tarafında dosyaları diske yazma işini şimdilik kodlamadan bıraktım. Zaten yazının konusu değil.
Örnek uygulamayı GitHub hesabıma yükledim. MVC4-knockoutjs-fileupload adresinden uygulamaya ulaşabilir, isterseniz katkıda bulunabilirsiniz.
