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.
Mahmut Can Sozeri 