ASP.NET Core MVC is a powerful framework that makes building web applications fast and easy. In many real-world scenarios, users need to upload and download files to and from the server. In this article, we will build a simple application that provides file upload and file download functionality in ASP.NET Core MVC.
1. Setting up the Project
To begin, create a new ASP.NET Core MVC project using the .NET CLI or Visual Studio.
Using CLI
dotnet new mvc -n FileUploadDownloadApp
cd FileUploadDownloadApp
Using Visual Studio
- Open Visual Studio and create a new project.
- Select "ASP.NET Core Web App (Model-View-Controller)".
- Name it FileUploadDownloadApp.
2. Creating the Model
The next step is to create a model that represents the file to be uploaded. We will store the uploaded file in an IFormFile object.
public class FileUploadViewModel
{
public IFormFile File { get; set; }
}
The IFormFile interface represents the uploaded file in the HTTP request.
3. Creating the Controller
The controller handles user requests to upload and download files. Create a new FileController with actions for file upload, file listing, and file download.
using Microsoft.AspNetCore.Mvc;
using System.IO;
using System.Threading.Tasks;
using FileUploadDownloadApp.Models;
using Microsoft.AspNetCore.Hosting;
public class FileController : Controller
{
private readonly IWebHostEnvironment _environment;
public FileController(IWebHostEnvironment environment)
{
_environment = environment;
}
// GET: File/Upload
public IActionResult Upload()
{
return View();
}
// POST: File/Upload
[HttpPost]
public async Task<IActionResult> Upload(FileUploadViewModel model)
{
if (model.File != null && model.File.Length > 0)
{
// Define the upload folder
string uploadPath = Path.Combine(_environment.WebRootPath, "uploads");
// Create the folder if it doesn't exist
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
// Generate the file path
string filePath = Path.Combine(uploadPath, model.File.FileName);
// Save the file to the specified location
using (var stream = new FileStream(filePath, FileMode.Create))
{
await model.File.CopyToAsync(stream);
}
ViewBag.Message = "File uploaded successfully!";
}
return View();
}
// GET: File/ListFiles
public IActionResult ListFiles()
{
string uploadPath = Path.Combine(_environment.WebRootPath, "uploads");
if (!Directory.Exists(uploadPath))
{
return View(new List<string>());
}
var files = Directory.GetFiles(uploadPath).Select(Path.GetFileName).ToList();
return View(files);
}
// GET: File/Download?filename=example.txt
public IActionResult Download(string filename)
{
if (string.IsNullOrEmpty(filename))
{
return Content("Filename is not provided.");
}
string filePath = Path.Combine(_environment.WebRootPath, "uploads", filename);
if (!System.IO.File.Exists(filePath))
{
return Content("File not found.");
}
byte[] fileBytes = System.IO.File.ReadAllBytes(filePath);
return File(fileBytes, "application/octet-stream", filename);
}
}
Breakdown
- Upload: Saves uploaded files to the /uploads directory in wwwroot.
- ListFiles: Displays a list of uploaded files.
- Download: Allows downloading files from the server by providing the file name as a query parameter.
4. Creating Views
Upload View (Upload. cshtml)
@model FileUploadViewModel
<h2>Upload File</h2>
<form asp-action="Upload" enctype="multipart/form-data" method="post">
<div class="form-group">
<input type="file" asp-for="File" class="form-control" />
</div>
<button type="submit" class="btn btn-primary">Upload</button>
</form>
@if (ViewBag.Message != null)
{
<p>@ViewBag.Message</p>
}
List Files View (ListFiles.cshtml)
Join the conversation! Your thoughts help the community grow.