File upload and view using ASP.NET MVC2

Today we will see how to build file upload functionality in MVC2 and then display uploaded files in a HTML table.

Screenshot:

Project setup:

  1. Create a new MVC 2 web application
  2. Create a new folder with name "UploadItems"
  3. Add new App Setting in web.config file with following values:

<appSettings>

<add key="FileUploadLocation" value="~/UploadItems"/>

</appSettings>

 

Now, we are ready to write some code.

Open home controller and at the top add a string variable with name "uploadLocation". We will use this variable to store information from app setting where uploaded files are going to get stored.

string uploadLocation = "";

public HomeController()

{

uploadLocation = WebConfigurationManager.AppSettings["FileUploadLocation"].ToString();

}

 

Let's set Index action method to retrieve whatever is present inside this upload location folder:

     [HttpGet]

public ActionResult Index()

{

DirectoryInfo dir = new DirectoryInfo(Server.MapPath(uploadLocation));

var files = from f in dir.GetFiles()

select f;

 

return View(files);

}

 

Now we will create a post method to receive form post:

[HttpPost]

public ActionResult Index(HttpPostedFileWrapper file)

{

if (file.ContentLength>0)

{

var fileName = Path.GetFileName(file.FileName);

var saveLocation = Path.Combine(Server.MapPath(uploadLocation), fileName);

file.SaveAs(saveLocation);

}

 

return RedirectToAction("Index");

}

 

In code above, our Index method is expecting Http posted file from request. We will use this file type to check if file has some content and if it does then we will save it to the given location using its SaveAs method.

Now we will add view for our Index action method. In order to add new view, right click anywhere inside the action method and select add view.

Add strongly typed view of type "IEnumerable<System.IO.FileInfo>":

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"

Inherits="System.Web.Mvc.ViewPage<IEnumerable<System.IO.FileInfo>>" %>

 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

Index

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2>

Index</h2>

 

<fieldset>

<legend>

Upload File:

</legend>

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

{ %>

<span>Filename:</span>

<input type="file" name="file" id="file" />

<input type="submit" value="Upload" />

<% } %>

 

</fieldset>

<div id="uploadTable">

<table border="0" cellpadding="0" cellspacing="0">

<thead>

<tr>

<th>

Filename

</th>

<th>

Length

</th>

<th>

LastModified

</th>

</tr>

</thead>

<tbody>

<% foreach (var item in Model)

{ %>

<tr>

<td>

<%: item.Name %>

</td>

<td>

<%: item.Length %>

</td>

<td>

<%: item.LastWriteTime %>

</td>

</tr>

<% } %>

</tbody>

</table>

 

</div>

</asp:Content>

 

And here is the output…

Tags: , , ,

ASP.NET | MVC