1). Add a Button on IndexPage for open a modal popup for FileUploadControl like given this image.
2). And add a partial view for define modal popup’s design here, using bootstrap for it.
@model MvcAppFirst.Customer
@{
ViewBag.Title = "_UploadedFiles";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>_UploadedFiles</h2>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<link href="~/Content/jQuery.FileUpload/css/jquery.fileupload.css" rel="stylesheet" />
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<style>
.bg {
background-color: darkgray;
}
.BG {
background-color: Gainsboro;
}
#loadingImg {
display: none;
}
</style>
<div class="modal-content" style="width: 800px !important;">
@using (Html.BeginForm("SaveFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.HiddenFor(m => m.CustomerID, new { @Value = TempData["ID"] })
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel" align="center">Choose Your File</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="col-md-12">
<div class="form-area">
<div class="container" align="center">
<input type="file" multiple="multiple" name="file" class="BG" />
<button type="submit" value="Upload Files" class="btn btn-info">Upload File</button>
<br />
</div>
</div>
</div>
</div>
</div>
}
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
}
</div>
3). Create an ActionMethod for uploading files. And attach a folder to the SolutionExplorer to keep the uploaded files safe.
//----------For Image/File Upload------//
[HttpGet]
public ActionResult SaveFile(int customerID)
{
TempData["ID"] = customerID;
return PartialView("_UploadedFiles");
}
[HttpPost]
public ActionResult SaveFile(Customer model, HttpPostedFileBase file)
{
if (file != null && file.ContentLength > 0)
try
{
string path = Path.Combine(Server.MapPath("~/SavedFiles"), Path.GetFileName(file.FileName));
file.SaveAs(path);
bool success = false;
var Customer = AP.Customers.Where(x => x.CustomerID == model.CustomerID).FirstOrDefault();
if (Customer != null)
{
success = AP.INSERTorUPDATE_CUSTOMER(Customer.CustomerID, Customer.Name, Customer.Mobileno, Customer.Address, Customer.Birthdate, DateTime.Now, Customer.EmailID, path) == 1 ? true : false;
AP.SaveChanges();
}
ViewBag.Message = "File uploaded successfully";
}
catch (Exception ex)
{
ViewBag.Message = "ERROR:" + ex.Message.ToString();
}
else
{
ViewBag.Message = "You have not specified a file.";
}
return RedirectToAction("Index");
}
4). Add a Download button (or Link button) in IndexView Page for download saved files.
For this action, we can define only the ActionMethod for download.
//---------------Download Files-------------//
public ActionResult Downloads(int customerID)
{
Customer model = AP.Customers.FirstOrDefault(x => x.CustomerID == customerID);
if (model != null)
{
if (System.IO.File.Exists(Server.MapPath(resolveVirtual(model.UploadFiles))))
{
string fileName = Path.GetFileName(resolveVirtual(model.UploadFiles));
byte[] fileBytes = System.IO.File.ReadAllBytes(Server.MapPath(resolveVirtual(model.UploadFiles)).ToString());
return File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Octet, fileName);
}
}
return null;
}
public static string resolveVirtual(string physicalPath)
{
string url = physicalPath.Substring(System.Web.HttpContext.Current.Server.MapPath("~").Length).Replace('\\', '/').Insert(0, "~/");
return (url);
}
5). Work on IndexViewPage.
@using (Html.BeginForm("DownloadFile", "Controller", FormMethod.Get)){}
Anonymous User
03-Aug-2018Nice Article