How to display table when creating bootstrap file-upload?

Hi team

I need some help, i have created file-upload the idea i want to display a table, that will have 'FileName', 'DateCreated', 'DateModified', 'ModifiedBy', 'Size'. Image below is an example. This is what i have done so far

// File-Upload.
[HttpGet]
public ActionResult FileIndex()
{
RegCoursesViewModel model = new RegCoursesViewModel();
//ViewBag.FileIndex = this.FileIndex();
return View(model);
}
[HttpPost]
public ActionResult FileIndex(HttpPostedFileBase files)
{
// verify that user select a file.
if(files !=null && files.ContentLength > 0)
{
//extract only the filename.
var fileName = Path.GetFileName(files.FileName);
// store the file inside ~/App_Data/uploads folder.
var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
files.SaveAs(path);
}
return RedirectToAction("FileIndex");
}
public class eNtsaFileUpload
{
[Key]
public int? Id { get; set; }
public string FileName { get; set; }
public DateTime DateCreated { get; set; }
public DateTime DateModified { get; set; }
public string Modified_By { get; set; }
public byte[] Size { get; set; }
public string FileUrl { get; set; }
public IEnumerable FileList { get; set; }
}
@using (Html.BeginForm("FileIndex", "Home", FormMethod.Post))
{
class="form-horizontal">
class="form-group row">
class="col-xs-3 ml-auto">
class="custom-file-upload">
class="fa fa-stack">Upload
"file" />

}

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Nisha Regil6y ago
As per my understanding you need to add items to eNtsaFileUpload after File is saved to Path.
You can use link below to check binding values to table in bootstrap.

https://datatables.net/examples/styling/bootstrap4
https://datatables.net/examples/ajax/
https://stackoverflow.com/questions/41900533/datatables-rendering-custom-column

for the 1st Column "Name" you can set a static image based on file extension and append it with file name.