Asp .Net Core MVC üzerinde Tekli ve Çoklu Resim Yükleme

Herkese Selamlar ! Bugün sizler ile beraber asp.net core mvc üzerinde tekli ve çoklu resim yükleme işlemlerine bakacağız. Web uygulamalarında artık dosya yükleme işlemi olmazsa olmaz duruma geldi. Herhangi bir web uygulamasına girdiğinizde kariyer sitesi, sosyal medya, kamu işlemleriniz için kullanabileceğiniz ya da  günlük hayatta girdiğimiz sıradan web uygulamasında bile resim yükleyebileceğimiz bir alan ciddi bir ihtiyaç haline geldi. Bugün ise sizler ile beraber Core MVC üzerinde bu işlemi tam olarak nasıl gerçekleştiriyoruz bir ona bakacağız. İlk aşamada uygulamamız bir core mvc uygulaması olduğu için Startup.cs sınıfımızı aşağıda ki gibi düzenliyoruz.

    public class Startup
    {

        public void ConfigureServices(IServiceCollection services)
        {
            services.Configure<CookiePolicyOptions>(options =>
            {
                services.AddMvc();
            });


            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            app.UseMvcWithDefaultRoute();
        }
     }

Uygulamamızı tam olarak açıklamaya başlamadan önce daha önce bahsetmiştim ama bir kez daha kısa bir şekilde açıklamakta fayda var ViewImports. Birden fazla view içerisinde ortak olarak kullanılmasını beklediğimiz directiveleri topladığımız bir yer var orası da ViewImport . Ayrı ayrı eklemek zorunda kaldığımız bir takım directivelari sadece bir adet ViewImport içerisine ekleyerek tüm viewlar tarafından kullanılmasını sağlayabiliriz. _ViewImports.cshtml dosyamızın gövdesine ise aşağıda ki tek satırı ekliyoruz.

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@addTagHelper sayesinde eklediğimiz viewlar üzerinde ihtiyaç duyduğumuz helperlara rahatlıkla erişip kullanabileceğiz. Şimdi ise tek bir görsel nasıl upload edilir buna giriş yapabiliriz. Uygulamamızın Controllers klasörüne bir adet “HomeController” isminde controller ekliyoruz ardından ise aşağıda yer alan tanımlamalarımızı yapıyoruz.

IHostingEnvironment _env;
Random rnd = new Random();
string directory;

Bu yazıyı okuyanlar arasında klasik asp.net ya da asp.net mvc üzerinde çalışmış olanlar vardır diye düşünüyorum. Bu tarz eski platformlar arasında sunucu ile ilgili bir işimiz olduğunda “Server” propertysi ile işlermizi yürütüyorduk. Özellikle söz konusu resim ya da bir dosya yükleme işlemi olduğunda Server.MapPath her zaman bize yardımcı olmuştur. .Net Core mimarisi geldikten sonra ise sunucu ortamı ile ilgili işlemlerimizi yürütebilmemiz için IHostingEnvironment geldi. IhostingEnvironment üzerinde çalıştığı sunucu hakkında bize ortamsal bilgileri getiren bir interfacedir. Sunucu üzerinde resimlerimizin kayıt altında tutulması için ihtiyacımız olan dizini bu interface sayesinde gerçekleştiriyor olacağız.

String tipinde olan directory ise yolun kendisini , random nesnemiz ise resmimize rastgele bir isim vermemizi sağlayacaktır.

        public HomeController(IHostingEnvironment env)
        {
            _env = env;
            directory = _env.ContentRootPath + "/Images/";
        }

Yukarıda yer alan kod bloğumuzda ise bir adet yapıcı method içerisinde değerlerin doğrudan atanmasını sağladık. _env.ContentRootPath kendi uygulamamızın dizinini verir bize. Ben ise doğrudan dizin içerisinde değil “Images” klasörü altında toplanmasını istediğim için uygulamamıza bir adet “Images” isminde klasör açıyorum.  Ardından sayfamızı göstereceğimiz sıradan bir IActionResult  tipinde Index isminde bir methodumuz var.

         public IActionResult Index()
         {
            return View();
         }

Resim yükleme işlemlerimizi gerçekleştirecek olan esas methodumuz ise ;

public IActionResult SingleFile(IFormFile file)
        {
          
            using (var fileStream = new FileStream(Path.Combine(directory,rnd.Next(0,99999).ToString()+".png"),FileMode.Create,FileAccess.Write))
            {
                file.CopyTo(fileStream);
            }
                return RedirectToAction("Index");
        }

Bu method aslında gayet kolay. Arayüz üzerinden gelecek olan resmi yakalayan IFormFile tipinde file isminde bir parametremiz var. Using içerisinde ise resmin kayıt altına alacağı directory dizini ona verdiğimiz rastgele bir isim (dosya altında isimler çakışmasın diye ) ve bir adette dosyamızın uzantısı yer almakta. Dosya modumuzun create ve bir adette yazma iznini vermemiz gerekmekte. Takiben fileStream sayesinde kişisel bilgisayar içerisinde bir dizinde yer alan resmi kendi sunucumuz içerisinde kopyalıyor ve yine kendi viewimiz üzerine yönlendiriyoruz. Bu işin back-end kısmıydı. Front-end tarafında ise ;

<div>
    <h4>Single file Upload</h4>
    <form asp-controller="Home" asp-action="SingleFile" enctype="multipart/form-data" method="post">
        <input type="file" name="file" value="" />
        <button type="submit">Submit</button>
    </form>
</div>

Hangi controller üzerinde ve hangi action sayesinde bu form koşacak onu belirtiyoruz. Tabi ki de söz konusu bir dosya olduğu için encryption type ve methodun post zamanında tetikleneceğinide söylememiz gerekmekte. Uygulamamızı çalıştırınca karşımıza gelecek olan ekran gayet sade.

• 

Çalıştırıp denediğimizde ise “Images” klasörümüz altında bu resimlerin yüklendiğini görebiliriz.

• 

Tekli dosya yükleme işlemi bu kadar kolay. Sıra geldi çoklu dosya işlemine aslında o da bir öncekine ciddi anlamda benzer. Sadece ufak tefek farklılıklar söz konusu. “MultipleFiles” isminde ayrı bir IActionResult daha ekliyoruz.

public IActionResult MultipleFiles(IEnumerable<IFormFile> files)
        {
            foreach (var file in files)
            {
                using (var fileStream = new FileStream(Path.Combine(directory, rnd.Next(0, 99999).ToString() + ".png"), FileMode.Create, FileAccess.Write))
                {
                    file.CopyTo(fileStream);
                }
            }
            return RedirectToAction("Index");
        }

Bu sefer ise parametre olarak IEnumerable tipinde parametremizi hazırlıyoruz. Sebebi ise belli birden fazla resim gelecek çünkü. Aynı tekli dosya içerisinde kurguladığımız yapıyı ise foreach döngüsü ile tekrarlanmasını sağlıyoruz. Bu sayede her bir resim için aynı işlem tekrarlanmış oluyor.

Front-End tarafında da tahmin edeceğiniz gibi sadece küçük bir detay söz konusu.

<div>
    <h4>Multiple file Upload</h4>
    <form asp-controller="Home" asp-action="MultipleFiles" enctype="multipart/form-data" method="post">
        <input type="file" multiple name="files" value="" />
        <button type="submit">Submit</button>
    </form>
</div>

Bu detay ise file tipindeki input parametremizın multiple olduğunu belirtiyoruz. İşte bu kadar. Artık sizlerde ihtiyacınız olması durumunda core mvc web uygulamalarınıza resim yükleme işleminizi kolayca gerçekleştirebileceksiniz. Örneği ise github hesabımdan tam olarak görebilirsiniz. Yazımı okuduğunuz için teşekkür ederim. Sonra ki yazılarımızda görüşmek üzere !