How to Upload an Image File in ASP.NET MVC 4

Uploading an image file in ASP.NET MVC 4 can be done using several different approaches, but one of the simplest and most effective is to use the HTML file input control and the HTTP POST method to submit the form. In this article, we'll go through the steps to implement a file upload in ASP.NET MVC 4.

Step 1: Create a New MVC Project

First, create a new ASP.NET MVC 4 project in Visual Studio. From the File menu, select New Project, and then choose ASP.NET MVC 4 Web Application.

Step 2: Add the File Input Control

Next, we'll add the file input control to the form that will be used to submit the image file. To do this, open the View that you want to use to display the file input control. You can either create a new View or modify an existing one. Then, add the following code to the View:

@using (Html.BeginForm("UploadFile", "Upload", FormMethod.Post, new { enctype = "multipart/form-data" }))
{ 
    <input type="file" name="file" />
    <input type="submit" name="Submit" id="Submit" value="Upload" />
}

The name of the input file should match the parameter name that you will use in the server side action.

Here is the server side code of the upload action:

public class UploadController : BaseController
{
    public ActionResult UploadDocument()
    {
        return View();
    }

    [HttpPost]
    public ActionResult UploadFile(HttpPostedFileBase file)
    {
        if (file != null && file.ContentLength > 0)
        {
            var fileName = Path.GetFileName(file.FileName);
            var path = Path.Combine(Server.MapPath("~/Content/Images/"), fileName);
            file.SaveAs(path);
        }

        return RedirectToAction("UploadDocument");
    }
}

Also, you can find the file in the Request.Files, as per the following code example:

if (Request.Files.Count > 0)
{
    var file = Request.Files[0];

    if (file != null && file.ContentLength > 0)
    {
        var fileName = Path.GetFileName(file.FileName);
        var path = Path.Combine(Server.MapPath("~/Content/Images/"), fileName);
        file.SaveAs(path);
    }
}

The HttpPost attribute on the action method indicates that the method should only be executed for HTTP POST requests. The HttpPostedFileBase parameter will receive the uploaded file. The code checks if the file has a content length greater than 0, which indicates that a file was actually selected. If a file was selected, the code gets the file name, creates the path where the file will be saved, and finally calls the SaveAs method to save the file to disk.

Step 4: Test the Upload

Finally, run the project and test the file upload. Select a file, click the "Upload" button, and the file should be uploaded and saved to the server.

Final Words

In conclusion, uploading an image file in ASP.NET MVC 4 is a straightforward process that can be achieved using the HTML file input control and the HTTP POST method. With a few simple steps, you can implement a file upload in your ASP.NET MVC 4 application.