.Net Core MVC Resim Yükleme

Merhabalar arkadaşlar,

Bu yazımda sizlere .Net Core Web projelerimizde resim yüklemesi işlemleri nasıl yapılır ondan bahsedeceğim.

Uygulamamızda bir kullanıcımız giriş yapıyor ve bu kullanıcının resmini web sitemizde gösteriyoruz. Doğal olarak kullanıcı kendi profil resmini yükleyebilmeyi veya değiştirebilmeyi isteyecektir. Biz de buna yönelik resim yükleme işlemlerimizi gerçekleştiren kodlarımızı yazmak durumundayız. Kullanıcı profil sayfasından resmini güncellemek istediğinde bir dosya seçer ve bu seçilen dosya sisteme kaydedilir. Daha sonra kullanıcının profil sayfasında yüklediği resim gözükecektir.

Gelelim bu işlemi nasıl sağlayabiliriz?

Öncelikle bir resim yüklemek için formumuzu aşağıdaki gibi oluşturalım.

<div class="row">
    <div class="col-md-12">
        <form asp-action="UploadImage" enctype="multipart/form-data" method="POST">
            <h2 class="text-center lead"> Resim Yükle</h2>
            <div class="form-group">
                <label for="exampleInputEmail1">Resim Bilgileri</label>
                <input type="file" name="file" class="form-control" />
            </div>
            <div class="form-group text-right">
                <input type="submit" class="btn btn-success btn-sm w-25" value="Resim Yükle" />
            </div>
        </form>
    </div>
</div>

Formumuzu oluşturduk ve içerisine bir adet dosya yüklemesi için input file ve input submit eklemesi gerçekleştirmiş olduk. Form’un asp-action kısmında ise ‘UploadImage’ aksiyonumuza gönderilsin diye belirttik. Dosya yüklemesi yapılırken enctype özelliğini girmemiz gerekmektedir. Buradaki enctype değerimizi de multipart/form-data olarak belirtiyoruz.

Şimdi gelelim UploadImage aksiyonumuzu yazmaya…

Form üzerinde belirttiğimiz şekilde aksiyonumuzu ayarlayalım. Öncelikle formun gönderileceği aksiyon HttpPost olacak ve ismi UploadImage olacak. Daha sonra bu bir IFormFile tipinde bir parametre alması gerekmektedir. Buradaki parametrenin adı ile formda yazdığımız input elementinin name özelliğindeki isim aynı olmalıdır. Aksi takdirde bind işlemi gerçekleşmez.

[HttpPost]
public async Task<IActionResult> UploadImage(IFormFile file)
{
    if(file != null)
    {
        string imageExtension = Path.GetExtension(file.FileName);

        string imageName = Guid.NewGuid() + imageExtension;

        string path = Path.Combine(Directory.GetCurrentDirectory(), $"wwwroot/images/{imageName}");

        using var stream = new FileStream(path, FileMode.Create);

        await file.CopyToAsync(stream);
     }

     return RedirectToAction("UploadImage");
}

Örnekte görüldüğü üzere UploadImage aksiyonumuzu yazdık. Şimdi burada neler yaptığımızdan bahsetmek istiyorum.

Öncelikle yüklediğimiz resmin uzantısını Path.GetExtension() metodunu kullanarak alıp imageExtension değişkenine aktarıyoruz.

Daha sonra Guid.NewGuid() metodunu kullanarak benzersiz(unique) bir isim oluşturup ve imageExtension değerimizi de ekleyerek imageName değişkenine aktarıyoruz.

Oluşturduğumuz resim ismi değerinden sonra ise Path.Combine() metodunu kullanarak verilen iki adresin birleştirilmesini gerçekleştiriyoruz ve path değişkenine aktarıyoruz. GetCurrentDirectory metodu bize projemizin bulunduğu path bilgisini dönecektir. Yani oluşan path değeri Çalıştığımız projedeki wwwroot klasörü altında bulunan images klasörünün içini belirtir.

Dosyamızı kaydetmek için bir stream nesnesi oluşturmamız gerekmektedir. Bunu da using kullanarak yapabiliriz. Using’in amacı stream nesnesinin işi bittikten sonra bunun bellekten temizlemesini sağlar.

Son olarak ise file.CopyToAsync metodumuzu kullanarak bunun içerisine bir üst satırda oluşturduğumuz stream nesnemizi veriyoruz. Bu işlemlerden sonra dosyamız belirttiğimi yol içerisine yüklenmiş oluyor. Asenkron metodumuzu çalıştırmak için UploadImage aksiyonunu async Task<IActionResult> ile işaretledik. Aksiyon içerisinde de CopyToAsync metodumuzun bulunduğu satırda await metodunun kullanımını sağladık. Bu işlemleri yapmak istemiyorsanız eğer CopyTo metodunu kullanabilirsiniz.

Ekran Görüntüsü:

Örnek uygulamayı sizlerle paylaşmak istiyorum.

Bu örnek uygulama içerisinde dosya yükleme ve yüklediğimiz klasördeki dosyaları listeleme özellikleri bulunmaktadır.

Umarım faydalı olur.

Bir sonraki yazıda görüşmek üzere…