Geçtiğimiz günlerde gerçekleşen Silvernight etkinliğinde aynı takımda çalıştığımız başka bir Matematik Mühendisi arkadaşımız Ararat ile Silverlight ve Flex üzerine projelere uygulanabilirlik üzerine konuşurken kendisinin bir .Net projesinde Fotoğraf upload için bir Flex kontrolünü türkçeleştirip .Net ile konuşturduğunu ve bunun da Server tarafında , ne .Net ile bukadar çoklu ve progressini gösterirken , ne de Silverlight ile client tarafında olmamasından bukadar verimli çalışabileceğini söyledi. Flex uygulaması gayet başarılı upload olan dosyaların yüzdelerini gösteriyor ve upload bitince direk sayfa refresh atarak fotoğrafı sayfaya ekleyebiliyor. Bunu kendisinden bir makale olarak bana yazmasını adıyla yayınlayacağımı söylemiştim geçenlerde makale elime geçti daha çok insanın kullanabilmesi için paylaşıyorum.

Web sitesi geliştirenlerin çoğunlukla karşılaşacağı kontrollerden bir tanesi de upload kontrolüdür. Bu noktada .NET kullananlar toolbox’taki FileUpload kontrolünü tercih etmektedirler. Ancak bu noktada bu kontrolle ilgili bazı problemler yaşanabilmektedir. Öncelikle upload süreci kullanıcıya gösterilmek istenebilir. Ayrıca çoklu dosya upload edilmek istenebilir. Bu noktada .NET’teki bu kontrol istenenleri karşılayamamaktadır. Ben de bu problemle karşılaştığımda ufak bir google araştırması yaparak http://www.codeproject.com/KB/aspnet/FlashUpload.aspx adresindeki FlashUpload kontrolüne rastladım. Bu adreste kontrolün kullanımı ile ilgili ihtiyaç duyulacak tüm dosyalar ve dolayısıyla da kodlar paylaşılmış. İsterseniz kontrolün kullanımına ve özelleştirilmesine başlayalım:

Öncelikle http://www.codeproject.com/KB/aspnet/FlashUpload.aspx adresinden sayfanın üst kısmında bulunan download linkine tıklayarak FlashUpload.zip dosyasını indiriyoruz. Klasöre çıkartıp açtığımızda birkaç dosya görmekteyiz.
İndirdiğimiz dosyalardan FlashUploadFlexSrc klasörü haricinde kalan klasörler Visual Studio 2008 ile hazırlanmış bir solution’ın elemanlarıdır. Sln uzantılı dosyayı açtığımızda Visual Studio’da açılan solution’da iki tane proje karşımıza çıkmaktadır. Bunlardan ilki FlashUpload_Web, diğeri ise FlashUpload projeleri. FlashUpload_Web projesi upload kontrolümüzün çalıştırılacağı örnek web sitesini temsil etmektedir. FlashUpload projesi ise upload kontrolümüzün swf dosyasını compile edip dll oluşturan projedir.

FlashUploadFlexSrc klasörünün içerisinde ise Adobe Flex ile hazırlanmış upload kontrolünün Flex kodları bulunmakta. Bu upload kontrolünün arayüzü tamamen İngilizce olduğundan bunu özelleştirip Türkçe yapmak isteyenler olabilir. Ayrıca arayüzde birtakım değişiklikler yapmak isteyenler olabilir. Özelleştirme yapmadan kullanmak isteyenler için indirdiğimiz klasörde bulunan FlashUpload klasöründe default olarak hazırlanmış swf dosyası bulunmaktadır.

Öncelikle bu kod dosyasını Flex tarafında nasıl özelleştireceğimize bakalım:

Bunun için Adobe Flex Builder 3 programı gerekmektedir. Bu programı http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email sayfasından indirip yükleyebilirsiniz. Programı indirip kurduktan sonra açıp File – New – Flex Project adımlarını izleyerek yeni bir Flex uygulaması oluşturuyoruz. Daha sonra Flex’in uygulamaları default olarak kaydettiği klasör olan My Documents/Flex Builder 3 klasörünün altında oluşturduğumuz projenin klasörünü bulup bu klasörün içine indirdiğimiz dosyada bulunan FlashUploadFlexSrc klasörünün içindeki FlashFileUpload.mxml ve components dosyalarını projemizde bulunan src dosyasının içine kopyalıyoruz. Kopyalamadan önce burada bulunan mxml uzantılı dosyayı silmemizde fayda var. Kopyalama işleminin ardından Flex Builder’a geri dönüp soldaki proje menüsünde projemizin üzerine gelip Refresh dersek eklediğimiz dosyaları göreceğiz. Bu adımdan sonra uygulamamızı yukarıdaki menüde bulunan Run düğmesiyle çalıştırabiliriz. Çalıştırdıktan sonra özelleştirilecek oldukça fazla nokta olduğu gözümüze çarpacaktır. Öncelikle tüm metinleri Türkçe’ye çevirmekle başlayalım. Mxml dosyamızın source kısmında bulunan kontrollerin üzerindeki yazıları kolaylıkla değiştirebiliriz. Ancak sadece mxml dosyasının içindeki kontrollerin isimlerini değiştirmek yeterli olmayacaktır. Çünkü ActionScript dosyalarımızın içinde eklediğimiz dosyalara göre dinamik olarak oluşan bir içerik mevcuttur. Bunu da değiştirebilmek için soldaki dosya görüntüleyicisinden eklemiş olduğumuz components klasörünün altındaki ApplicationClass.as ve FileUpload.as dosyalarını açıyoruz. ApplicationClass.as dosyasında bulunan kodlarda Alert komutu ile uyarı verilen metodlardaki deyimleri ve SetProgressBar() metodundaki metinleri değiştirebiliriz. Daha sonra FileUpload.as dosyasından da FileUpload, OnUploadProgressChanged ve FormatSize metotlarındaki metinleri değiştirebiliriz. Daha sonra da uygulamamızı tekrar çalıştırdığımızda değişiklikleri görebiliriz.

Gelelim Flex’te yaptığımızı web sayfamıza nasıl aktaracağımıza. İndirdiğimiz dosyaların içerisinde bulunan Visual Studio 2008 ile hazırlanmış solution dosyamızı açıyoruz. Daha sonra Flex projemize gelip yukardaki Project menüsünden Build All deyip swf dosyamızın oluşmasını sağlıyoruz. Oluşan swf dosyamıza Flex projemizin bulunduğu dizindeki bin-debug klasöründen ulaşabiliriz. Daha sonra oluşan swf dosyasını kopyalayıp indirdiğimiz dosyaların içinde bulunan FlashUpload klasörüne yapıştırıyoruz. Yapıştırdığımızda eski swf ile değiştirmiş oluyoruz. Daha sonra da tekrar Visual Studio’ya dönüp solution’umuzda FlashUpload projesine sağ tıklayıp Set As StartUp Project dedikten sonra bu projeyi build edip swf dosyamızı derleyip dll haline getirmiş oluyoruz. Sonra oluşan bu dll’i FlashUpload klasörünün altındaki bin klasöründen kopyalayıp FlashUpload_Web klasörünün içindeki bin dosyasının içine yapıştırıyoruz.

Şimdi sıra geldi bu kontrolü oluşturacağımız siteye ekleyip çalıştırmaya.

FlashUpload kontrolümüzü aspx dosyamıza ilave etmek için şu tag’i sayfamızın kod kısmına eklemeliyiz :

<FlashUpload:FlashUpload ID="flashUpload" runat="server"

UploadPage="Upload.axd" OnUploadComplete="UploadComplete()"

FileTypeDescription="Images" FileTypes="*.gif; *.png; *.jpg; *.jpeg" UploadFileSizeLimit="1800000" TotalUploadSizeLimit="2097152" />

Burada UploadFileSizeLimit ve TotalUploadSizeLimit değerlerini istediğimiz şekilde değiştirebiliriz. Böylece bir dosyanın boyutunun limiti ile eklenen dosyaların toplam boyutlarının limitini belirleyebiliriz. Ayrıca FileTypes değeri ise upload edilebilecek dosyaların uzantılarına sınır koymakta kullanılabilir. Bu kısmı da istediğimiz şekilde değiştirebiliriz.

Aspx sayfamıza FlashUpload kontrolünü yerleştirdikten sonra web.config dosyasına da eklememiz gereken kısımlardan bahsedelim. Öncelikle bu kontrolün yükleme komutu .NET tarafında bir Upload sınıfıyla kontrol edilmektedir. Bu sınıf da IHttpHandler ve IRequiresSessionState interface’lerinden türemiştir. Bu sınıf dosyaların belirlediğimiz dizine kayıt işlemini gerçekleştirmektedir. Bu doğrultuda web.config dosyamıza aşağıdaki tag’i eklememiz gerekmektedir.

<httpHandlers>

<remove verb="POST,GET" path="Upload.axd"/>

<add verb="POST,GET" path="Upload.axd" type="Upload"/>

</httpHandlers>

Detaylı bir proje geliştiriyorsak yazılan Upload sınıfını ihtiyaçlarımız doğrultusunda değiştirmemiz gerekecektir. Örneğin; resmi ekleyen kişiyle ilgili projemizde özel dosyalar varsa ve bu kişi veritabanında bir satırda tutuluyorsa onunla ilgili birtakım bilgilere göre upload işlemimizi yürütmemiz gerekecektir. Burada da HttpHandler’dan türeyen Upload sınıfımıza parametre göndermek veya Session aktarmak isteyebiliriz. Session ile ilgili olarak karşılaştığım problemlerden bir tanesi FireFox ile Flash arasında Session aktarım sorununun oluşmasıydı. Bununla ilgili birkaç fikir ve öneri yazının başında verdiğim linkteki tartışma alanında mevcut. Ama bence daha efektif olan ve tüm tarayıcılarda çalışan parametre aktarımından bahsedeceğim.

Öncelikle aspx dosyamızdan parametreyi oluşturmamız gerekmektedir:

flashUpload.QueryParameters = string.Format("User={0}", "kullanıcı1”);

Yukardaki kod bloğundaki gibi User parametresinin değerini kullanıcı1 olarak atadık. Göreceğimiz üzere FlashUpload objesinin QueryParameters özelliğini kullanarak bu işlemi gerçekleştirdik. Sonuç olarak da handler’ımızdan bu değeri yakalayabiliriz. Upload sınıfımızın içine de;

string param1 = context.Request.QueryString["User"];

şeklinde bir tanımlamayla User parametresinin değerine erişmemiz mümkündür. Ayrıca bu sınıf içinde;

string uploadPath =

context.Server.MapPath(context.Request.ApplicationPath + "/Upload");

şeklinde bir tanımlamayla upload edilen dosyaların nereye kayıt edileceğini de belirlemiş oluyoruz.

Sonuç olarak ASP.NET ve Flex’i beraber kullanarak çoklu dosya upload kontrolünün kullanımını açıklamış olduk. Siz de bu kontrolü projelerinizde kendinize göre özelleştirerek kullanabilirsiniz.

Kaynak kodlar : http://expression.web.tr/multiple_file_upload.rar

(Makalemde özelleştirdiğim kısımları içeren kaynak kodu da ekte bulabilirsiniz. Dosyada bulunan DotNet_FlashUpload klasörünün içindeki solution dosyasını Visual Studio 2008 ile açıp çalıştırabilirsiniz. Flex_FlashUploadDemo klasörünün içindeki kaynağı Flex Builder 3’de yeni bir proje oluşturup, oluşturulan dizindeki kaynağın yerine yapıştırarak kullanabilirsiniz.)

(Not: Kaynak kodlar http://www.codeproject.com/KB/aspnet/FlashUpload.aspx adresinden alıntıdır.)

Makale  : ARARAT AVŞAROĞLU

Teşekkürler Ararat....