File Upload in MVC3 By Using Razor

In this article i will show you how to upload file in MVC 3 by using razor engine. So for this follow the step.

Have a look of my this article for uploading multiple file mvc3

Step 1:

Fist create a new MVC 3 project.



Add the project name and click ok. As you click on ok button  a new window will open in this window you will option for project type. Select the internet application and razor click ok button.

public ActionResult Index()
        {
            ViewBag.Message = "MVC 3 File Upload";

            return View();
        }

After clicking ok your project will open now got to Home controller and add the view for index method



Now click Add button to add the view. do not change the view name . bcz each view represent a method.

Now add the following html code in your index page.

@{
    ViewBag.Title = "Home Page";
}
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
   

        Select Image
          
       

   

   

   

}

in above code i have added file upload control and a post button.

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))

the above line of code is the form tag.

now again come to your controller and add a post method for the index. refer the below code.

        [HttpPost]
        public ActionResult Index(HttpPostedFileBase file)
        {
            // extract only the fielname         
            var fileName = Path.GetFileName(file.FileName);
            // store the file inside ~/images/User-Image folder         
            var path = Path.Combine(Server.MapPath("~/images/"), fileName);
            // this is the string you have to save in your DB
            string filepathToSave = "images/" + fileName;
            file.SaveAs(path);
            //--------------------------------------------

            // Code to save file in DB by passing the file path

            //----------------------------------------------
            return View();
        }

In above code HttpPostedFileBase  is help to get the file detail as page will post when we click on upload button.

now create a images folder in your root directory . This is the directory where we will save the image.



Now we have done . Now run your code. 

Now  i will explain what actually  happen at code end




Now select the file and click upload button



As you press upload your break point inedx page will hit



In this when you check the parameter value you will fiund the file detail . Now press F10 for next step.



Here we are getting the uploaded file name.





Here we are getting the file local path.




Here we are saving file in images folder. now finish the process and open your images folder. you will get your image

Tags: C#.Net , HTML5 , MVC