---
title: "Upload File in Asp.Net Mvc 4"  
description: "In this article, I’m explaining how to upload image in an asp.net mvc 4 application."  
author: "Sumit Kesarwani"  
published: 2014-08-26  
updated: 2020-06-30  
canonical: https://www.mindstick.com/articles/1485/upload-file-in-asp-dot-net-mvc-4  
category: "asp.net mvc"  
tags: ["asp.net mvc"]  
reading_time: 2 minutes  

---

# Upload File in Asp.Net Mvc 4

In this article, I’m explaining how to upload image in an asp.net mvc 4 application.

Step 1

First create a table in database named “UploadFile” like this:

![Upload File in Asp.Net Mvc 4](http://www.mindstick.com/MindStickArticle/cf1e1dd9-fdba-4617-94f0-407223574447/Images/image001.png)

##### Step 2

Now create a basic asp.net mvc 4 application and add a class named “UploadFile”

like this:

```
using System;using System.Collections.Generic;using System.ComponentModel.DataAnnotations;using System.ComponentModel.DataAnnotations.Schema;using System.Linq;using System.Web; namespace UploadFileMvcApp.Models{    [Table("UploadFile")]    public class UploadFile    {        [Key]        public int FileId { get; set; }        public string Title { get; set; }    }}
```

##### Step 3

Now add another class named “FileContext” like this:

```
using System;using System.Collections.Generic;using System.Data.Entity;using System.Linq;using System.Web; namespace UploadFileMvcApp.Models{    public class FileContext : DbContext    {        public DbSet<UploadFile> Files { get; set; }    }}
```

##### Step 4

Now add a controller to the project named “HomeController” and write the below

code in it:

```
using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Web;using System.Web.Mvc;using UploadFileMvcApp.Models; namespace UploadFileMvcApp.Controllers{    public class HomeController : Controller    {        FileContext db = new FileContext();         public ActionResult Index()        {            return View();        }         [HttpPost]        public ActionResult Index(string Title, HttpPostedFileBase file)        {            if (ModelState.IsValid)            {                UploadFile files = new UploadFile();                files.Title = Title;                db.Files.Add(files);                db.SaveChanges();                 int Id = (from a in db.Files select a.FileId).Max();                 if (Id > 0)                {                    if (Request.Files["file"].ContentLength > 0)                    {                        string extension = Path.GetExtension(Request.Files["file"].FileName);                        string path = string.Format("{0}/{1}{2}", Server.MapPath("/Files"), Id, extension);                         Request.Files["file"].SaveAs(path);                         ViewData["Message"] = "File Uploaded Successfully";                     }                    else                    {                        ViewData["Message"] = "File Uploaded Failed";                    }                }            }            return View();        }    }}
```

##### Step 5

Now add a view named “Index” to the project and write the below code in it:

```
@{    ViewBag.Title = "Index";} <h2>Upload File Samle</h2><div style="width: 400px;">    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))    {        <div style="width: 100%; float: left;">            <div style="width: 100px; float: left;">                <label>Title </label>            </div>            <div style="width: 200px; float: left;">                <input type="text" id="Title" name="Title" />            </div>        </div>        <div style="width: 100%; float: left;">            <div style="width: 100px; float: left;">                <label>Upload File </label>            </div>            <div style="width: 200px; float: left;">                <input type="file" name="file" id="file" />            </div>        </div>        <div style="width: 100%; float: left;">            <div style="width: 300px; float: right;">                <input type="submit" id="btnSubmit" name="Upload" />            </div>        </div>    }</div><div>    @if (ViewData["Message"] != "")    {        @ViewData["Message"]    }</div>
```

##### Step 6

Now add the connection string in the web.config file like this:

```
<connectionStrings>    <add name="FileContext" connectionString="Data Source=Uttam-PC4; Initial Catalog=SumitTesting;user id=userid;password=password;" providerName="System.Data.SqlClient"/>  </connectionStrings> 
```

##### Step 7

Now add a folder to the project like this:

![Upload File in Asp.Net Mvc 4](http://www.mindstick.com/MindStickArticle/cf1e1dd9-fdba-4617-94f0-407223574447/Images/image003.png)

##### Output

Now run the application:

![Upload File in Asp.Net Mvc 4](http://www.mindstick.com/MindStickArticle/cf1e1dd9-fdba-4617-94f0-407223574447/Images/image005.png)

![Upload File in Asp.Net Mvc 4](http://www.mindstick.com/MindStickArticle/cf1e1dd9-fdba-4617-94f0-407223574447/Images/image007.png)

Click on submit button:

![Upload File in Asp.Net Mvc 4](http://www.mindstick.com/MindStickArticle/cf1e1dd9-fdba-4617-94f0-407223574447/Images/image009.png)

Now open the Files folder from the Visual Studio like this:

![Upload File in Asp.Net Mvc 4](http://www.mindstick.com/MindStickArticle/cf1e1dd9-fdba-4617-94f0-407223574447/Images/image011.png)

![Upload File in Asp.Net Mvc 4](http://www.mindstick.com/MindStickArticle/cf1e1dd9-fdba-4617-94f0-407223574447/Images/image013.png)

As you see that your image file has been uploaded.

---

Original Source: https://www.mindstick.com/articles/1485/upload-file-in-asp-dot-net-mvc-4

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.