How To Upload Image And Save Image In Project Folder In MVC

In this blog you will learn how to Upload image and save the image in project folder in MVC.

Today i am explaining how to upload image in mvc and save the image in project folder.

 

Create a new MVC project, and choose the following template.

 

 

 

Here is my solution explorer of the project.

 

Right click on the project and follow the following steps for adding Entity data model to it.

 

 

Click on add New Item-Data->ADO.NET Entity Data Model

 

Click-Next

Choose your connection string  and choose the 'Yes'  rodio button so that it will automatically update in your web.config.

 

 

 

Now specify the tables you want.

 

When you click finish it will add your table to the ORM designer as follow.Here your table is mapped as a class and all the fields inside the table act as property.

 

 

 

When you click finish it will add your table to the ORM designer pattern.here your table is mapped as a class and the colums as property.

 

 

 

So here we have 3 fields.

 

Now we are comming to our main requirement.

 

Add a img folder to the project so that our images can store here.

 

 

Go to the home controller and  write the following code here i have described each line of code

public class HomeController: Controller
{
    MVCEntities obj = new MVCEntities();
    public ActionResult Index() {
        return View();
    }
    [HttpPost]
    public ActionResult Index(FormCollection fc, HttpPostedFileBase file)
    {
        tbl_details tbl = new tbl_details();
        var allowedExtensions = new[] {
            ".Jpg", ".png", ".jpg", "jpeg"
        };
        tbl.Id = fc["Id"].ToString();
        tbl.Image_url = file.ToString(); //getting complete url
        tbl.Name = fc["Name"].ToString();
        var fileName = Path.GetFileName(file.FileName); //getting only file name(ex-ganesh.jpg)
        var ext = Path.GetExtension(file.FileName); //getting the extension(ex-.jpg)
        if (allowedExtensions.Contains(ext)) //check what type of extension
        {
            string name = Path.GetFileNameWithoutExtension(fileName); //getting file name without extension
            string myfile = name + "_" + tbl.Id + ext; //appending the name with id
            // store the file inside ~/project folder(Img)
            var path = Path.Combine(Server.MapPath("~/Img"), myfile);
            tbl.Image_url = path;
            obj.tbl_details.Add(tbl);
            obj.SaveChanges();
            file.SaveAs(path);
        } else {
            ViewBag.message = "Please choose only Image file";
        }
        return View();
    }
}

Right click on Index action method and create a view like this.

 

 

 

The source code for the view is- 

@using(Html.BeginForm("Index", "Home", FormMethod.Post, new {
    enctype = "multipart/form-data"
})) { < div > < img id = "user_img"
    height = "100"
    width = "90"
    style = "border:solid" / > < /div>
<div>
<input type="file" title="search image" id="file" name="file" onchange="show(this)" / > < /div>
<div>
UserId
</div > < div > < input type = "text"
    id = "txt_id"
    name = "id" / > < /div>
<div>
UserName
</div > < div > < input type = "text"
    id = "txt_name"
    name = "Name" / > < /div>
<div>
<input type="submit" title="save" / > < /div>
}

Now i want when i choose the image it should be dispalayed in the image control for this this is my Javascript.

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
   function show(input) {
      if (input.files && input.files[0]) {
      var filerdr = new FileReader();
      filerdr.onload = function (e) {
         $('#user_img').attr('src', e.target.result);
      }
      filerdr.readAsDataURL(input.files[0]);
   }
}
</script>

Add this script just above the form tag.

 

Now run the project.

 

As it open start add  any information.

 

 

 

Thus this will save our image in img folder and url in database.

 

And one more things if we are taking other extensions it will not save in database.

 

In this way we can perform our operation.

 

Thanks you.