How to Upload Multiple Files in an ASP.net Core MVC Application and View the Uploaded Files on Another Page

How to Upload Multiple Files in an ASP.net Core MVC Application and View the Uploaded Files on Another Page

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.

Step 1: Create a Model for File Uploads

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; }
            }
        
    

Step 2: Create a View for File Uploads

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:

<form method="post" asp-action="UploadFiles" enctype="multipart/form-data">
    <div class="form-group">
        <label for="files">Select Files:</label>
        <input type="file" id="files" name="files" multiple>
    </div>
    <button type="submit" class="btn btn-primary">Upload</button>
</form>

Step 3: Implement the File Upload Action

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.

Step 4: Create a View for Viewing Files

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:

<table class="table">
    <thead>
        <tr>
            <th>File Name</th>
            <th>Download</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var file in ViewBag.Files)
        {
            <tr>
                <td>@file.FileName</td>
                <td><a href="@Url.Action("Download", "Home", new { fileName = file.FileName })">Download</a></td>
            </tr>
        }
    </tbody>
</table>

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.

Step 5: Pass Uploaded Files to the View

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.

Conclusion

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.