I am working on a file uploader tool in MVC and once the files are uploaded I want to show all the files that are uploaded in a Webgrid.
In the webgrid I want the user to have the ability to delete one file from the grid or select all files and delete them. so when they delete it the files needs to be removed from its physical location.
Here is my controller code
public ActionResult UploadFiles(HttpPostedFileBase[] files) { Models.FileModel f = new Models.FileModel(); List<Models.FileModel> TableName = new List<Models.FileModel>(); //Ensure model state is valid if (ModelState.IsValid) { //iterating through multiple file collection foreach (HttpPostedFileBase file in files) { //Checking file is available to save. if (file != null) { f.FileName = file.FileName; long size = file.ContentLength / 1024 <= 0 ? 1 : file.ContentLength / 1024; f.FileSize = string.Format("{0:N0} KB", size); f.FileType = "File"; f.LastUpdate = DateTime.Now.ToShortDateString(); TableName.Add(f); var InputFileName = Path.GetFileName(file.FileName); var ServerSavePath = Path.Combine(Server.MapPath("~/UploadedFiles/") + InputFileName); //Save file to server folder file.SaveAs(ServerSavePath); //assigning file uploaded status to ViewBag for showing message to user. ViewBag.UploadStatus = files.Count().ToString() + " files uploaded successfully."; } } ViewBag.Message = TableName; } return View(); }Here is my View Code@model UploadMultipleFilesInMVC.Models.FileModel@{ ViewBag.Title = "Upload Multiple Files"; WebGrid grid = new WebGrid(ViewBag.Message);} @if (ViewBag.UploadStatus != null) { @grid.GetHtml( tableStyle: "table", // applying style on grid fillEmptyRows: true, //show empty row when there is only one record on page to it will display all empty rows there. headerStyle: "header", //applying style. footerStyle: "grid-footer", //applying style. columns: new[] // colums in grid { grid.Column("FileType"), //the model fields to display grid.Column("FileName" ), grid.Column("LastUpdate"), grid.Column("FileSize"), grid.Column("ActualSize"), grid.Column("ActualModifiedDate"), }) }