Uploading multiple files is a common task in web applications. In this tutorial, we'll learn how to upload multiple files in an ASP.net Core MVC application and view the uploaded files on another page.
The first step is to create a model that represents the uploaded files. We'll create a class called FileUpload
with properties for the file name and content:
public class FileUpload
{
public string FileName { get; set; }
public byte[] Content { get; set; }
}
Next, we'll create a view that allows users to upload multiple files. We'll use the enctype="multipart/form-data"
attribute in the HTML form to allow file uploads. We'll also use the tag to allow users to select multiple files:
Now that we have a view for file uploads, we need to implement the action that handles the file uploads. We'll create a method called UploadFiles
in our controller that reads the uploaded files and adds them to a list of FileUpload
objects:
[HttpPost]
public async Task UploadFiles(List files)
{
List uploadedFiles = new List();
foreach (IFormFile file in files)
{
using (var stream = new MemoryStream())
{
await file.CopyToAsync(stream);
uploadedFiles.Add(new FileUpload
{
FileName = file.FileName,
Content = stream.ToArray()
});
}
}
// Save the uploaded files to a database or file system here
return RedirectToAction("ViewFiles", "Home");
}
In this code, we iterate over the uploaded files and add them to a list of FileUpload
objects. We use the CopyToAsync
method of the IFormFile
object to read the file content into a memory stream, and then create a new FileUpload
object with the file name and content. Finally, we redirect the user to another action called ViewFiles
in the HomeController
.
Now that we have uploaded files, we need to create a view that allows users to view the uploaded files. We'll create a new view called ViewFiles.cshtml
in the Views/Home
folder:
File Name
Download
@foreach (var file in ViewBag.Files)
{
@file.FileName
Download
}
In this code, we display a table of uploaded files with their file names and download links. The download links use an action called Download
in the HomeController
that downloads the file content:
public IActionResult Download(string fileName)
{
// Load the file content from the database or file system here
byte[] fileContent = null; // Load the file content here
if (fileContent == null)
{
return NotFound();
}
return File(fileContent, "application/octet-stream", fileName);
}
In this code, we load the file content from the database or file system and return it as a file with the File
method. The application/octet-stream
content type tells the browser to download the file instead of displaying it in the browser window.
Finally, we need to pass the uploaded files to the ViewFiles
action so they can be displayed in the view. We'll modify the UploadFiles
action to pass the uploaded files to the ViewFiles
action:
[HttpPost]
public async Task UploadFiles(List files)
{
List uploadedFiles = new List();
foreach (IFormFile file in files)
{
using (var stream = new MemoryStream())
{
await file.CopyToAsync(stream);
uploadedFiles.Add(new FileUpload
{
FileName = file.FileName,
Content = stream.ToArray()
});
}
}
// Save the uploaded files to the database or file system here
ViewBag.Files = uploadedFiles;
return RedirectToAction("ViewFiles");
}
In this code, we create a new List
object called uploadedFiles
and add each uploaded file to it. Then we pass this list to the ViewBag
object, which is used to pass data between the controller and the view. Finally, we redirect the user to the ViewFiles
action.
In this tutorial, we've learned how to upload multiple files in an ASP.NET Core MVC application and display them on another page. We used the built-in IFormFile
interface to read the uploaded files and the File
method to download them. We also used the ViewBag
object to pass data between the controller and the view. By following the steps outlined in this tutorial, you should be able to implement file uploading in your own ASP.NET Core MVC applications.