ASP.NET MVC Core 5.0 – Dosya Yükleme İşlemi(Jquery ile)

Merhaba arkadaşlar,
ASP.NET Mvc Core 5.0 Dosya yükleme işlemini bir proje ile anlatacağım. View tarafından controller tarafına giderken ise Jquery kullanacağım. Zaten bu yazıyı yazmamdaki amaç bu aslında. Çünkü Jquery kullanmadan file tipindeki bir inputu kolayca controller tarafına set edebiliyoruz zaten. Bu yüzden jquery ile isteği gönderip-alacağım.

Başlayalım.

1- Asp.Net MVC projesi oluşturdum.

2- wwwroot altına files adında klasör oluşturdum.

3- Controller klasörü altına FileUploadController isimli Controller ekledim.

FileUploadController.cs

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System;
using System.IO;
using System.Threading.Tasks;
 
namespace CoreFileUploadExample.Controllers
{
    public class FileUploadController : Controller
    {
        public IActionResult FileUpload()
        {
            return View();
        }
 
        [HttpPost]
        public async Task<JsonResult> FileUpload(IFormFile formFile)
        {
            if (formFile != null)
            {
                var extent = Path.GetExtension(formFile.FileName);
                var randomName = ($"{Guid.NewGuid()}{extent}");
                var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot\\files", randomName);
 
                //Create file
                using (var stream = new FileStream(path, FileMode.Create))
                {
                    await formFile.CopyToAsync(stream);
                }
 
                return Json("Dosya yüklendi");
            }
 
 
            return Json("Dosya yüklenirken hata oluştu, lütfen daha sonra tekrar deneyiniz.");
        }
    }
}

4- View klasörü altına, FileUpload klasörü açtım ve içine FileUpload.cshtml dosyasını oluşturdum.

FileUpload.cshtml

 @{
        ViewData["Title"] = "Home Page";
  }
     
    <div class="container">
        <form id="fileUploadForm" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <input type="file" name="file" id="file"  />
                <input type="button" class="btn btn-primary" id="btnUploadFile" value="Yükle" />
            </div>
        </form>
    </div>

     
    @section Scripts {
        <script>
            $(document).ready(function () {
                var btnUploadFile = $("#btnUploadFile");
     
                btnUploadFile.click(function (e) {
     
                    var fd = new FormData();
                    var files = $('#file')[0].files;
     
                    // Check file selected or not
                    if(files.length > 0 ) {
                        fd.append('formFile',files[0]);
     
                        $.ajax({
                            url: 'FileUpload',
                            type: 'POST',
                            data: fd,
                            cache: false,
                            contentType: false,
                            processData: false,
                            success: function(result) {
                                alert(result);
                            },
                            error: function(error) {
                                alert(error);
                            }
                        });
     
                    } else {
                        alert("Lütfen dosya seçiniz");
                    }
            
                });
     
            });
     
        </script>
    }

Script kodlarında FormData olayına değinmek istiyorum. Controller tarafına IFormFile tipinde bir objeyi set edebilmemiz için, Jquery’de FormData’yı kullanmamız gerekiyor. Genel yöntem olan JSON.Stringify ile file objelerini controller tarafına gönderemiyoruz. Muhtemelen sizinde burada olma sebebiniz budur diye düşünüyorum 🙂
Bundan dolayı FormDatayı doldurup, controller tarafına gönderiyoruz.

5- Views altında bulunan Home.cstml sayfasına FileUploada yönlendirme yapan bir link ekledim.

Home.cstml

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
   @* <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>*@

    <a href="@Url.Action("FileUpload", "FileUpload")">Dosya yükle</a>
</div>

İşlemler bitti.

Proje genel yapısı şu şekilde oldu.

Projeyi çalıştırıp test edelim.

Bir dosya seçip, yükle butonuna bastım. Dosyanın yüklendiği uyarısını aldım. Gidip files dizinine baktığımda, dosyaynın klasöre yazılmış olduğunu gördüm.

Tüm bu projeye github profilimden ulaşabilirsiniz: https://github.com/semihcelikol/CoreFileUploadExample

Umarım faydalı olmuştur.
Herkese iyi çalışmalar dilerim.