CK Editör ile Sunucuya Resim Yollama C#-3

Merhabalar,
Bu yazım daha önceki CK Editor entegrasyonu serinin devamı ve şimdilik son yazısı olabilir.Bu gün CK Editor imaj plug-inini bir .Net elementi olan .ashx dosyası ile ilişkilendirip sunucuya yazı aralarına resim girmek için kullanacağımız kendi görsellerimizi upload edeceğiz.Blogger editor'ü aslında buna güzel bir örnek bu yazıyı yazarken üst bar daki Resim butonuna(plug-ini)basıp bilgisayarımdan resim seçerek sunucuya yüklüyorum.Biz de benzer bir geliştirme yapacağız.

Ne dinlemeli ?
Bunun için ilk olarak ilk yazımızda oluşturduğumuz Default.aspx dosyasında aşagıdaki filebrowserImageUploadUrl özelliğinde oluşturacağımız Upload.ashx 'in isminin yazmasına dikkat etmeliyiz.

</textarea>

// Replace the <textarea id="editor1"> with a CKEditor

// instance, using default configuration.

// CKEDITOR.replace('BodyContent_editor1');

CKEDITOR.replace('<%=editor1.ClientID %>',

{

filebrowserBrowseUrl: '/ckfinder/ckfinder.html',

filebrowserImageBrowseUrl: './Upload.ashx/',

filebrowserFlashBrowseUrl: '/ckfinder/ckfinder.html?Type=Flash',

filebrowserUploadUrl: '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',

filebrowserImageUploadUrl: './Upload.ashx',

filebrowserFlashUploadUrl: '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash',

});

</script>

Şimdi Upload.ashx dosyasını oluşturmak için projemize sağ tıklayıp yeni item ekle diyoruz ve
bir Generic Handler ekliyoruz.

Şimdi yüklenen imajların saklanacağı klasörü oluşturuyoruz ben projenin hemen altında Images adında bir klasör oluşturdum siz başka bir yer de oluşturup path'ini alabilirsiniz.

Upload.ashx dosyasını oluşturalım ve aşağıdaki gibi kodlayalım.

<%@ WebHandler Language="C#" Class="Upload" %>

using System;

using System.Web;

public class Upload : IHttpHandler {

public void ProcessRequest (HttpContext context) {

HttpPostedFile uploads = context.Request.Files["upload"];

string CKEditorFuncNum = context.Request["CKEditorFuncNum"];

string file = System.IO.Path.GetFileName(uploads.FileName);

uploads.SaveAs(context.Server.MapPath(".") + "\\Images\\"+ file);

//provide direct URL here

string url = "http://localhost:32870/Images/" + file;

context.Response.Write("<script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + url + "\");</script>");

context.Response.End();

}

public bool IsReusable {

get {

return false;

}

Görüldüğü gibi HttpPostedFile elementinden faydalanarak yeni bir instance oluşturup .SaveAs metodu ile daha önceden oluşturduğumuz "Images" klasör yolu vasıtası ile fotoğrafı bu klasöre upload ediyoruz.

Daha sonra yazı içerisinde bu resmin gözükmesi için direkt web url 'ini text alanına ekliyoruz. context.response.write kısmı bu işe yarıyor bu kodlamayı yapıp aşağıdaki adımları yapınca daha iyi anlayacaksınız.

İlk olarak kırmızı ile işaretlediğim butona basarak aşağıdaki diyalog ekranına erişiyoruz ve Sunucuya Yükle sekmesine geçiyoruz.Dosya seç deyip bir Call of Duty :) imajı seçiyoruz. Sunucuya yolla dediğimizde işte bizim Upload.ashx kodlarımız çalışıyor SaveAs ile imajı kaydedip ,resmin web url ini alıp text arasına ekliyor ve böylece yazı ve resim elde etmiş oluyoruz.

Projemiz localhost altında çalıştığı için yüklediğimiz fotografın web url yaklaşık aşagıdaki gibi bir şey olmalı eğer domain ve sunucumuz olsaydı www.xxxsite.com/Imges/Image1.jpg gibi olurdu.

Ve projemizde oluşturduğumuz "Images" klasörünü incelediğimizde benim yüklemek için denediğim iki resminde bu klasörde olduğunu görebiliyorum,siz hangi imajı denediyseniz o fotoğrafları bu klasörde görebilirsiniz.

Tam projeyi burada bulabilirsiniz.

Sağlıkla, huzurla , müzikle kalın :)
Umarım bu yazı dizisi faydalı olmuştur, okuduğunuz için teşekkürler.

Author Description