Asp.NET MVC – Multiple File Upload

Web projelerinde genellikle Server’a HTML tabanlı “file” ya da Asp.NET Web Form tabanlı “FileUpload” nesnelerini kullanarak dosya aktarımı gerçekleştiririz.Lakin aktarım aşamasında teker teker POST işlemi gerçekleştirmek yerine seri bir şekilde çoklu upload yapmayıda tercih edebiliriz.Bu yazımızda Asp.NET MVC mimarisinde, file nesnesini kullanarak çoklu yükleme işlemini inceleyeceğiz.

Bu makalemizde gösterilecek olan file nesnesi HTML tabanlı hazır bir Component yapısındadır.JQuery ile geliştirilmiş bu nesneyi ister http://www.fyneworks.com/jquery/multiple-file-upload/ adresinden, istersenizde buradan elde edebilirsiniz.

İndirdiğiniz .rar uzantılı dosyayı açtığınızda aşağıdaki dosyaların eksiksiz bulunduğuna emin olunuz.

Öncelikle örnek bir Asp.NET MVC projesinde nesnemizi nasıl entegre edeceğimizi görelim.
Yukarıdaki dosyaları Solution Explorer penceresinden projemizin “Content” isimli klasörüne taşıyınız.

Ardından projemizin her sayfasında bu dosyalardan yararlanabilmek için “_Layout.cshtml” dosyamıza aşağıdaki gibi entegre kodlarını ekleyelim.

    @Scripts.Render("~/Content/jquery.blockUI.js")
    @Scripts.Render("~/Content/jquery.js")
    @Scripts.Render("~/Content/jquery.MetaData.js")
    @Scripts.Render("~/Content/jquery.form.js")
    @Scripts.Render("~/Content/jquery.MultiFile.js")
    @Scripts.Render("~/Content/jquery.MultiFile.pack.js")
    @Scripts.Render("~/Content/jquery.validate.js")

Şimdi “Home(Controller).cs” isminde Controller katmanımıza bir sınıf açalım ve “Index” isimli Action metodun View görüntüsünü oluşturalım.

Yazımızın bundan sonrasına devam etmeden önce önemli bir husustan bahsetmek istiyorum.Bu Componentin üç tane farklı özelliğe sahip olan yapısı olduğundan dolayı, “Index.cshtml” isimli View dosyamızın içeriğinde üçünden de örneklendirme yapacağım.

@using (Html.BeginForm("DosyaUpload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    // 1. Özellik : Sınırsız dosya seçilebiliyor.
    <input type="file" class="multi" name="SecilenDosyalar" /><br />

    // 2. Özellik : MaxLenght özelliğine verilen değer kadar dosya seçilebiliyor.
    <input type="file" class="multi" maxlength="2"  name="SecilenDosyalar" /><br />

    // 3. Özellik : Accept özelliğine verilen uzantı adları sayesinde dosyaları filtrelendirip, sadece belirli uzantılarda dosyalar seçilmesi sağlanabiliyor.
    <input type="file" class="multi" accept="gif|jpg"  name="SecilenDosyalar" /><br />

    <input type="submit" value="Dosyaları Aktar" />
}

Yukarıdaki kod bloğunu incelerseniz eğer Component’imizin üç farklı özelliğininde numunesini yazmış olduk.Lakin burada dikkat etmeniz gereken iki husus var.Bunlardan biri, “Html.BeginForm” metodu sayesinde oluşturulan formun POST edilmesi neticesinde “Home(Controller).cs” isimli Controller sınıfındaki “DosyaUpload” isimli metodu çalıştıracağını belirttik.Yani “Home(Controller).cs” isimli Controller sınıfımıza “DosyaUpload” isimli metodumuzu oluşturacağız.İkinci husus ise “Html.BeginForm” metodunun parametrelerine “new { enctype = “multipart/form-data” }” ifadesini eklemek olacaktır.Bu ifade sayesinde POST sonucu sunucuyla bağlantılı bir çoklu işlem yapılacağını belirtmiş oluyoruz.

Evet son olarak “Home(Controller).cs” isimli Controller sınıfımızda “DosyaUpload” isimli metodumuzu oluşturalım.

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult DosyaUpload()
        {
            return View();
        }
    }

Evet artık bu haliyle projemizi derleyip çalıştırırsak dört tane farklı özelliğe sahip file nesnesiyle aşağıdaki gibi karşılaşacağız.

Yukarıdaki ekran görüntüsünü incelerseniz eğer, file nesnelerinin yanındaki özellik numaralarıyla yukarılarda bahsedilen özellikler birebirdir.

Evet artık sıra herhangi bir file nesnesinden seçilen dosyaları MVC mimarisiyle çekip Server’a yollamaya geldi.Artık bundan sonra formumuzun içinde tek bir file nesnesi bulunduğunu varsayıyorum.(her hangi bir özelliğe sahip olan)

File nesnemizden seçilen dosyaları “Home(Controller).cs” isimli Controller sınıfımızdan çekip Server’ımızda ki bir klasöre aktarabilmek için “DosyaUpload” isimli Action metodumuzu kullanacağız.

        [HttpPost]
        public ActionResult DosyaUpload(IEnumerable<HttpPostedFileBase> SecilenDosyalar)
        {
            foreach (var item in SecilenDosyalar)
            {
                item.SaveAs(HttpContext.Server.MapPath("~/Content/Dosyalar/" + item.FileName));
            }
            return RedirectToAction("Index");
        }

Yukarıdaki kod bloğunu incelerseniz eğer, file nesnemizle dosyaları seçtikten sonra formu tetiklersek eğer, “DosyaUpload” metodumuz devreye girecektir.Haliyle file nesnemizdeki dosyaları “IEnumerable<HttpPostedFileBase>” tipinden olan “SecilenDosyalar” isimli parametremiz yakalayacaktır.Burada çok dikkat etmemiz gereken husus, “IEnumerable<HttpPostedFileBase>” tipinden olan parametrenin ismi file nesnemizin “name” özelliğindeki değerle aynı olmalıdır.Aksi taktirde bu parametrenin değeri “null” olarak gelecektir.

Seçilen dosyaları herhangi bir dizine ekleyebiliriz.Ben “Content” klasörümüzde oluşturduğumuz “Dosyalar” isimli klasöre ekliyorum.

Artık yapılandırmamız eksiksiz olarak gerçekleştirildiyse eğer projemizi derleyip çalıştırabiliriz.Denememiz sonucunda seçtiğimiz dosyaların belirttiğimiz dizine eklendiğini göreceğiz.

Hepinize iyi çalışmalar diliyorum.
Görüşmek üzere…