ASP.NET Core: Upload file

Trong bài viết này, mình sẽ hướng dẫn bạn cách upload 1 file, upload nhiều file.

Upload 1 file

Bạn tạo controller với 2 action như sau:

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

[HttpPost]
public IActionResult Index(IFormFile file)
{
    return View();
}

Thẻ form sẽ gồm có 3 thành phần cần lưu ý:

• Method = post
• Enctype ="multipart/form-data": Thuộc tính enctype chỉ định cách mã hóa dữ liệu biểu mẫu khi gửi nó đến máy chủ.
• Input type= "file" 

<form method="post" enctype="multipart/form-data" asp-controller="Home" asp-action="Index" enctype="multipart/form-data">
    <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Upload one file using this form:</label>
        <input type="file" name="file" class="form-control" />
    </div>
    <button type="submit" class="btn btn-primary">Upload</button>
</form>

Quay lại controller, chúng ta thêm phần xử lý cho action Index.

_webHostEnvironment: lấy đường dẫn của folder Project

Khai báo fileStream để copy stream từ IFormFile

public class HomeController : Controller
{
    private readonly ILogger<HomeController> _logger;
    private IWebHostEnvironment _webHostEnvironment;
    public HomeController(ILogger<HomeController> logger, IWebHostEnvironment webHostEnvironment)
    {
        _logger = logger;
        _webHostEnvironment = webHostEnvironment;
    }

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

    [HttpPost]
    public IActionResult Index(IFormFile file)
    {
        var dir = _webHostEnvironment.ContentRootPath;
        using(var fileStream = new FileStream(Path.Combine(dir, "FileUploads", file.FileName), FileMode.Create))
        {
            file.CopyTo(fileStream);
        }
        return View();
    }

}

Upload nhiều file

Thêm từ khóa multiple vào thẻ input file

<form method="post" enctype="multipart/form-data" asp-controller="Home" asp-action="MultiFile" enctype="multipart/form-data">
    <div class="mb-3">
        <label for="files" class="form-label">Upload multi files using this form:</label>
        <input type="file" name="files" class="form-control" multiple />
    </div>
    <button type="submit" class="btn btn-primary">Upload</button>
</form>

Để nhận được nhiều file ở action, bạn dùng IEnumerable<IFormFile>

[HttpPost]
public IActionResult MultiFile(IEnumerable<IFormFile> files)
{
    var dir = _webHostEnvironment.ContentRootPath;
    foreach(var file in files)
    {
        using (var fileStream = new FileStream(Path.Combine(dir, "FileUploads", file.FileName), FileMode.Create))
        {
            file.CopyTo(fileStream);
        }
    }
    return RedirectToAction("Index");
}