File upload in Asp.Net MVC

In this article we are going to learn about 'How to upload file in Asp.Net MVC 5'.

Here first we creating the Action which accept the FileUpload request.

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(HttpPostedFileBase fileUpload)
        {
            // check file selected by user.
            if (fileUpload != null)
            {
                string path = Server.MapPath("~/files/");
                // check the folder exist, if not create it.
                if (!Directory.Exists(path))
                {
                    Directory.CreateDirectory(path);
                }

                fileUpload.SaveAs(path + fileUpload.FileName);

                ViewBag.UploadFileMsg = "File uploaded successfully";
            }
            else // if file not selected, show message to user.
            {
                ViewBag.UploadFileMsg = "Please select the file";
            }

            return View();
        }
    }

If you read the above codes then here only 3 things you need to remember in case of file upload in MVC.
1. Action must have http-verbs or attribute with POST value.
2. The data type of parameter must be HttpPostedFileBase
3. The NAME of parameter must match with the control name provided in View, otherwise you will get null value.

After that you can go with your applicaton business requirement and save the file on server using SaveAs method of HttpPostedFileBase which is nothing but the variable which we have in parameter.

So, here we done with the Controller, now move to UI part as View.
Below are the lines which we need to add in View to show the file upload button and basic functionality like here Submit button and message will show after load.

@using (Html.BeginForm("Index", "Home", FormMethod.Post, 
new { enctype = "multipart/form-data" }))
{
    <span>Please select file:</span>
    <input type="file" name="fileUpload" />
    <br />
    <input type="submit" name="btnSubmit" value="Submit" />
    <br />
    @ViewBag.UploadFileMsg
}

above you can see the lines using which you can add the file upload control in your view with submit button and message.
If you notice here I bold three things.
1. In view, the form method must be Post.
2. Add htmlAttributes parameter in BeginForm method with key 'enctype' and value 'multipart/form-data'.
3. The name of the file control must match with action parameter name.

There is other old ways also to upload file  using HttpPostedFile and HttpPostedFileWrapper but I recommend you to go with HttpPostedFileBase only.

Thank you to be here and if anything I did wrong or you have any input about this article please comment below.