Bu makalemizde ASP.NET Form, ASP.NET MVC, ASP.NET Web Api 1 sürümlerinde yaptığımız file upload işleminin ASP.NET Web Api 2’de nasıl yapılabildiğini güzel bir örnek ile göreceğiz.
ASP.NET Web Api 2 İle Dosya Yükleme(File Upload) İşlemi
Özet açıklama kısmında “ASP.NET Form, ASP.NET MVC, ASP.NET Web Api 1 sürümlerinde yaptığımız file upload işleminin ASP.NET Web Api 2’de nasıl yapılabildiğini…” gibi bir cümle kurduğumuzu farketmiş olmalısınız bunun nedenide ASP.NET Web Api 2 hariç diğer saydığım proje tiplerinde upload edilmek istenen dosyalara erişmek için HttpContext.Current.Request.Files şeklinde kolayca erişebiliyorken ASP.NET Web Api 2’de bu kadar kolay olmayabiliyor çokda zor değil ama alışkanlıklardan kolay kolay vazgeçilmediği için buda ne diyebilirsiniz 🙂 Fakat bu cümleyi kurmamak adına örneği güzel bir şekilde yapabilmeyi umut ediyorum.
Şimdi hızlıca örneğimize geçelim kurgumuz oldukça basit olacak Html tarafındaki bir form ile Web Api 2 Controller’imizdaki Action’a dosyaları POST edeceğiz ve Action içerisinde ilgili dosyaları yakalayıp Bu yakaladığımız dosyaların bilgilerinden oluşmuş sonucu kullanıcıya çıktı olarak vereceğiz.
Öncelikle ASP.NET Web Api 2 Controlleri oluşturuyoruz ve içeriğini alttaki gibi dolduruyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | using System; using System.Linq; using System.Net.Http; using System.Threading.Tasks; using System.Web.Http; namespace WebMvcTest.Controllers { [System.Web.Http.RoutePrefix("api/test")] public class FileUploadController : ApiController { [System.Web.Http.Route("files")] [System.Web.Http.HttpPost] [ValidateMimeMultipartContentFilter] public async Task<FileResult> UploadSingleFile() { var streamProvider = new MultipartMemoryStreamProvider(); await Request.Content.ReadAsMultipartAsync(streamProvider); string descriptionResult = string.Empty; var description = streamProvider.Contents.AsEnumerable() .FirstOrDefault(T => T.Headers.ContentDisposition.Name == "\"description\""); if (description != null) { descriptionResult = await description.ReadAsStringAsync(); } return new FileResult { FileNames = streamProvider.Contents.AsEnumerable().Select(T => T.Headers.ContentDisposition.FileName).ToArray(), Names = streamProvider.Contents.AsEnumerable().Select(T => T.Headers.ContentDisposition.FileName).ToArray(), ContentTypes = streamProvider.Contents.AsEnumerable().Where(T => T.Headers.ContentType != null).Select(T => T.Headers.ContentType.MediaType).ToArray(), Description = descriptionResult, CreatedTimestamp = DateTime.UtcNow, UpdatedTimestamp = DateTime.UtcNow, }; } } } |
En baştan aşağı doğru kodumuzu açıklayalım RoutePrefix attribute’ü ile api/fileupload şeklinde ulaşmamız gereken controller‘a api/test şeklinde güncellemiş oluyoruz ve Route attribute’ü ilede UploadSingleFile
action’ına files olarak ulaşmayı sağlıyoruz böylelikle her iki attribute sonucunda projemiz içerisinde action‘a şu şekilde ulaşacağız api/test/files. HttpPost attribute’ü zaten standart olarak kullandığımız veri iletim metodunu belirtiyoruz. Burada ValiDateMimeMultipartContenFilter adında bir Attribute var bunu kendimiz oluşturduk Attribute içerisindeki 2 satır kodu UploadSingleFile adlı metod içerisindede kullanabilirdik fakat farklı bir Action‘da kullanmak istersek aynı tanımlamayı tekrar yapmayalım diye ActionFilterAttribute olarak tanımladık. ValidateMimeMultipartContentFilterAttribute adındaki attribute kodlarına bir alttaki kod
bloğundan gözatabilirsiniz. Metodumuzun tanımına baktığımızda asenktron bir metod olduğunu görüyoruz. Şimdide UploadSingleFile adlı metod içerisine gözatalım MultipartMemoryStreamProvider sınıfı ile Request’deki tüm MultiPart içerikleri okuyor olacağız yaptığınız isteğin okunabilmesi için html form etiketine enctype=”multipart/form-data” tanımını yapmış olmalısınız. Bu html alttaki satırlarda gözatacağız. MultiPart içeriklerini okuduktan sonra tüm içeriklere stremProvider.Contents nesnesi üzerinden ulaşabiliyor olacağız. Bundan sonraki satırlar makale konusu kapsamında olmadığı için yani standart Where,Select, ToArray v.b işlemler olduğundan makaleyi daha fazla uzatıp sıkmak istemiyorum ama belkide es geçilemeyecek bir konu var bundan sonraki satırlar içerisinde oda description.ReadAsStringAsync() satırıdır okunan içeriklerin bir liste olarak streamProvider.Contents adlı nesnesi üzerinde barındığını söylemiştik bu nesne içerisinden ContentDisposition.Name’i “description” olan yani aslında bizim html tarafındaki input[type=text] türünden nesnemize ait oluşturulmuş bir içeriktir bu içeriğin html barındırdığını bildiğimizde ReadAsStringAsync diyerek stream’den string’e çevirmini sağlıyoruz bu şekilde farklı yardımcı metodlar ile içeriklerinizi dosya olarak oluşturabilir üzerinde işlemler yapabilirsiniz.
ValidateMimeMultipartContentFilterAttribute adlı Attribute‘e ait kodlara gözatacağımızı daha önce söylemiştik. Burada pek anlatılacak bir durum yok açıkçası ama kısaca özetleyelim ActionExecuting edileceği zaman yapılan isteğin MultiPart bir içeriğe sahip olunup olunmadığı kontrol ediliyor daha önce bunun uyarısını yapmıştık bu durum gözardı edilirse exception almanız olası bir durumdur. Eğer istek MultiPark bir içerik değil ise DesteklenmeyenMedyaTürü diye bir ResponseException’ı fırlatılıyor.
1 2 3 4 5 6 7 8 | internal class ValidateMimeMultipartContentFilterAttribute : ActionFilterAttribute { public override void OnActionExecuting(HttpActionContext actionContext) { if (!actionContext.Request.Content.IsMimeMultipartContent()) throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); } } |
Metodun geri dönüş tipi olan FileResult sınıfının tanımlandığı FileResult.cs adlı dosyanın içeriğini görelim.
1 2 3 4 5 6 7 8 9 10 11 12 | using System; namespace MHG.AspNet.WebApi2.Upload.Models { public class FileResult { public string[] FileNames { get; set; } public string[] Names { get; set; } public string[] ContentTypes { get; set; } public string Description { get; set; } public DateTime CreatedTimestamp { get; set; } public DateTime UpdatedTimestamp { get; set; } } } |
Şimdide html tarafında Action’ımıza isteği yapacak form’umuza gözatalım.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <html> <head> <meta name="viewport" content="width=device-width" /> <title>Web Api 2 File Upload</title> </head> <body> <div> <form action="@Url.Action("files", "api/test")" method="post" enctype="multipart/form-data"> <fieldset> <legend>Upload Form</legend> <ol> <li> <label>Description</label> <input type="text" name="description" id="description" /> </li> <li> <label>Upload</label> <input type="file" id="fileInput" name="fileInput" multiple/> </li> <li> <input type="submit"/> </li> </ol> </fieldset> </form> </div> </body> </html> |
Form’da unutulmaması gereken muhteşem üçlü var 🙂 buda action, method ve enctype attribute’leridir. Tabi bu isteği oluşturacak input[type=submit] html elementimizde olmazsa olmazlardan. Yapılacak bu isteğin içerisinde sonuç olarak bir input[name=description] ve seçili dosya kadar input[type=file] nesnesi için içerikler istek parametrelerine eklenecektir.
Şimdi html formumuzun görünümüne ve yaptığımız istek sonrası bize dönen sonuca bakalım.
Gönder dediğimizde FileUploadController adlı ApiController‘i içerisinde kodlar işlendikten sonra FileResult tipinde çıktı alıyoruz Google Chrome‘da xml olarak sonuç aldığımızı göreceksiniz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <FileResult xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.datacontract.org/2004/07/MHG.AspNet.WebApi2.Upload.Models"> <ContentTypes xmlns:d2p1="http://schemas.microsoft.com/2003/10/Serialization/Arrays"> <d2p1:string>image/jpeg</d2p1:string> </ContentTypes> <CreatedTimestamp>2017-01-07T17:55:11.8960663Z</CreatedTimestamp> <Description>muratoner.net</Description> <FileNames xmlns:d2p1="http://schemas.microsoft.com/2003/10/Serialization/Arrays"> <d2p1:string i:nil="true" /> <d2p1:string>"giphy.jpg"</d2p1:string> </FileNames> <Names xmlns:d2p1="http://schemas.microsoft.com/2003/10/Serialization/Arrays"> <d2p1:string i:nil="true" /> <d2p1:string>"giphy.jpg"</d2p1:string> </Names> <UpdatedTimestamp>2017-01-07T17:55:11.8960663Z</UpdatedTimestamp> </FileResult> |
[fa class=”fa-github”] Makaledeki örneğimize buradaki github repository adresinden ulaşabilirsiniz.
Başka bir makalede görüşmek dileğiyle 🙂
