ASP.NET MVC 3 Razor İpucu 4 – HTML 5 Sürükle Bırak Dosya Yükleme (Drag-Drop File Upload)


asp-net-MVC3

Merhaba MVC Severler,

Önceki ipucu yazımda sizlere XSS atakları ile ilgili dikkat edilmesi gereken bir kaç noktayı belirtip, örnekler yaptık. Bu ipucumda sürükle-bırak yöntemi ile hazır bir kütüphane ile dosya yüklemeyi yapacağız.

Hazırlık

Uygulamamızı Visual Studio 2010 Ultimate sürümünde ASP.NET MVC 3 Empty Template üzerinde yapacağız. Ayrıca bu adresten fileupload.js dosyasını .zip içerisinde indirebilirsiniz. Yada indirme bölümünde ben projenin içerisinde bulabilirsiniz.

Giriş

Dosya yüklemesi çoğu zaman biz developer’ların gerçekten developer’lığını göstermesini gerektirebilir. MVC içerisinde bu biraz daha zor. Bu uygulamamızda sürükle-bırak yöntemi ile dosya yüklemek söylendiği kadar olmadığını biliyoruz. Bu yazımda jQuery ile hazırlanan güzel bir açık kaynaklı filedrop metotunu ile yapacağız.

Uygulama

1) jquery.filedrop.js dosyasını Script klasörü altına ekliyoruz. 

2) Home adında bir Controller ve içerisinde Index() geriye ActionResult  döndüren bir metot ve Index adında bir View oluşturuyoruz.

3) View içeriğimizi aşağıdaki gibi düzenliyoruz.

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <style type="text/css">
    #dropZone
    {
        width: 200px;
        height: 50px;
        padding: 50px;
        text-align: center;
    }

    .dropZon
    {
        background: white;
        border: black dashed 3px;
        text-align: center;
    }

    .dragOver
    {
        border: Blue dashed 3px;
    }

    .drapLeave
    {
        border: black dashed 3px;
    }

    .drapDrop
    {
        border: red dashed 3px;
    }
</style>
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.filedrop.js")" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {

        $('#dropZone').filedrop({
            url: '@Url.Action("UploadFiles")',
            paramname: 'files',
            maxFiles: 5,
            dragOver: function () {
                $('#dropZone').removeClass().addClass("dragOver");
            },
            dragLeave: function () {
                $('#dropZone').removeClass().addClass('drapLeave');
            },
            drop: function () {
                $('#dropZone').removeClass().addClass("drapDrop");
            },
            afterAll: function () {
                $('#dropZone').html('Dosya(lar) başarıyla yüklendi.');
            },
            uploadFinished: function (i, file, response, time) {
                $('#uploadResult').append('<li>' + file.name + '</li>');
            },
            progressUpdated:function(a,b,c)
            {

            }
        });
    });
    </script>
</head>
<body>
    <div>
        <h2>Sürükle-Bırak Dosya Yükleme Örneği</h2>
        <div id="dropZone" class="dropZon">
            Sürükleyin!
        </div>
        Yüklenen Dosyalar:
        <ul id="uploadResult">
        </ul>
    </div>
</body>
</html>

Aslında dikkat etmemiz gereken sadece bir kaç yer var. Bunlardan birisi draggable bir div’e ihtiyacımız var. Bu divin ID’sini jQuery seçicisine parametre olarak verip filedrop metotunu kullanmak yetiyor.  Url kısmı bizim HomeController’imiz içerisinde çalışacak metotu belirlediğimiz bölümdür.

4) Content klasörü altına Images adında bir klasör ekleyelim. Resimlerimizi bu klasöre kayıt edeceğiz. 

5) HomeController içerisine yollanan dosyaları alıp kaydedek bir metotlarımızı yazıyoruz.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.IO;
using System.Web.UI;
using System.Web.Routing;

namespace _04_ASPNETMVC_Razor_Ipucu_Drag_Drop_File_Upload.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {

            return View();
        }

        string TempPath = AppDomain.CurrentDomain.BaseDirectory + @"\Content\images\";

        [HttpPost]
        public ActionResult UploadFiles(IEnumerable<HttpPostedFileBase> files)
        {
            foreach (HttpPostedFileBase file in files)
            {
                string filePath = Path.Combine(TempPath, file.FileName);
                System.IO.File.WriteAllBytes(filePath, ReadData(file.InputStream));
            }

            return Json("Bütün dosyalar başarılı bir şekilde yüklendi...");
        }

        private byte[] ReadData(Stream stream)
        {
            byte[] buffer = new byte[16 * 1024];

            using (MemoryStream ms = new MemoryStream())
            {
                int read;
                while ((read = stream.Read(buffer, 0, buffer.Length)) > 0)
                {
                    ms.Write(buffer, 0, read);
                }

                return ms.ToArray();
            }
        }

    }
}

6) Çalışmasını izleyelim.

İndirme

Uygulamayı bu linkten indirebilirsiniz.

Kaynaklar

http://css.dzone.com/articles/implementing-html5-drag-drop

Umarım faydalı bir yazı olmuştur.

İyi çalışmalar

MVC ile kalın.

, , , , , ,

  1. ASP.NET MVC 4 RC Razor İpuçu 4 – Twitter ve Facebook Helper’ını Kullanma (NuGet) « Mahmut Can Sözeri
  2. [Blog Post(Turkish)] ASP.NET MVC İle İlgili Tüm Yazılarım (29 Yazı, 1 Yazı Dizisi ve 1 İpucu Serisi) « Mahmut Can Sozeri

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s