Friday 1 April 2016

File upload and display code using MVC ?

Hi friends,
 This blog I writing how to write code in mvc for file upload and show upload file in webgrid.
public class ImageUploadController : Controller
    {
        //
        // GET: /ImageUpload/
        ImageNewMvcEntities tt = new ImageNewMvcEntities();

        public ActionResult UploadData()
        {
            return View();
        }
        [HttpPost]
        public ActionResult UploadData(FormCollection fc , HttpPostedFileBase file)
        {
            try
            {
           // var allowedExtensions = new[] { ".jpg", ".jpeg",".png" };
 //var extension = Path.GetExtension(file.FileName);
               // var extension = Path.GetExtension(file.FileName);

//if (file.ContentLength <= 50228)
//{
////if (allowedExtensions.Contains(extension))
////{

var filename = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/Images/"), filename);
file.SaveAs(path);
User_Image uu = new User_Image
{
SrNo = Convert.ToInt32(fc["txtSrNo"]),
Name = fc["txtName"].ToString(),
Photo = file.FileName
};
tt.User_Image.Add(uu);
tt.SaveChanges();
ViewData["msg"] = 1;
}

////else
////{
////ViewData["msg"] = 2;// "Please upload only  jpg and jpge file for image";
////}
////}
//else
//{
//ViewData["msg"] = 3;//"upload only 10 kb ";
//}
//}

catch (Exception ex)
{
ViewData["error"] = ex.Message;
}

return View();
  }

        public ActionResult ShowImage()
        {
            List<User_Image> uimg = new List<User_Image>();
            uimg = tt.User_Image.OrderBy(m => m.SrNo).ToList();
            return View(uimg);
        }
        }

    }

View page code:-
Showimage.cshtml
@model List<TESTMVC.Models.User_Image>
@{
    ViewBag.Title = "ShowImage";
}

<h2>ShowImage</h2>
@{
Layout = null;
//ViewBag.Title = "User with Image";
var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 10);
grid.Pager(WebGridPagerModes.All);
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ShowImage</title>

<style type="text/css">
table
{
font-family: verdana,arial,sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table th
{
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table td
{
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<div>
<table>
<tr><td>Show All Image from DataBase</td></tr>
<tr><td>

@grid.GetHtml(
columns:grid.Columns
(
grid.Column(columnName:"SrNo",header:"SrNo"),
grid.Column(columnName:"Name",header:"Name"),

grid.Column(
format: (item) =>
{
return Html.Raw(string.Format("<text><img src=\"{0}\" alt=\"Images\" width='75px' height='75px'/></text>","/Images/"+Url.Content(@item.Photo)));
}
)
))
</td></tr>
<tr><td>Go  to: @Html.ActionLink("Save Image Again ","UploadData","ImageUpload")</td></tr>
</table>

</div>
</body>
</html>

Uploadimage.cshtml
@model List<TESTMVC.Models.User_Image>
@{
    ViewBag.Title = "UploadData";
}

<h2>UploadData</h2>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>


<style type="text/css">
table
{
font-family: verdana,arial,sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table th
{
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table td
{
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>

<div class="signup" id="new">
@using (Html.BeginForm("UploadData", "ImageUpload", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<table width="100%" border="5px">
<tr><td colspan="2"><b><center><b><i>How to Save Image in DataBase and Show with WebGrid in Mvc 4.0</i></b></center></b></td></tr>

<tr><td>SrNo</td><td>@Html.TextBox("txtSrNo")</td></tr>
<tr><td>Name:</td><td>@Html.TextBox("txtName")</td></tr>
<tr><td>Profile Image:</td><td><input name="file" type="file" /></td></tr>
<tr><td colspan="2"><input type="submit" name="submit" id="submit" value="Save Image" /></td></tr>
<tr><td colspan="2">

<div style="color:red;">@ViewData["error"]</div>

Show Data :  @Html.ActionLink("Show Image ","ShowImage","ImageUpload")

@if (ViewData["msg"] != null)
{
if (ViewData["msg"].ToString() == "1")
{
<div style="color:Green;">Registration Successful.</div>
}
else if (ViewData["msg"].ToString() == "2")
{
<div style="color:Orange;">Please upload only  jpg and jpge file for image.</div>
}
else
{
<div style="color:Red;">upload only less than and equal image with 12 kb.</div>
}
}
</table>
}
</div>
</body>
</html>

No comments:

Post a Comment