ASP.NET MVC 3 for beginners: uploading files to the server

In the course of teaching new technologies, newcomers often have typical problems that are not so easy to solve. A series of MVC3 articles for beginners will present solutions to such problems.

Recently, at a conference for developers in Yekaterinburg, where I talked about ASP.NET, I was asked a question about how using MVC3 and Razor to organize downloading one or several files from the client side to the server. It is a typical task, which is very easily and elegantly solved in ASP.NET MVC3.
')
Below is the complete solution with source codes.

Markup

First of all, let's create the markup for the Home.controller Index.cshtml page:

<h2>  </h2> <p> @using (Html.BeginForm("", "home", FormMethod.Post, new {enctype="multipart/form-data"})) { <input type="file" name="fileUpload" /><br /> <input type="submit" name="Submit" id="SubmitSingle" value="Upload" /> } </p> <h2>  </h2> <p> @using (Html.BeginForm("", "home", FormMethod.Post, new {enctype="multipart/form-data"})) { <input type="file" name="fileUpload[0]" /><br /> <input type="file" name="fileUpload[1]" /><br /> <input type="file" name="fileUpload[2]" /><br /> <input type="submit" name="Submit" id="SubmitMultiply" value="Upload" /> } </p> 

Here are some important points that need to be disassembled:

• to transfer large files, the MIME data type is multipart / form-data;
• when forming a form with several file upload elements, it is necessary to form element names (name attributes) with indexers [No.]. This is an ASP.NET MVC3 agreement that allows you to automatically get an array of elements when working with controller actions.

As you can see, the markup code is trivial.

Action code in the controller

Add a Home controller with an Index action with a Post attribute and some parameters:

 [HttpPost] public ActionResult Index(IEnumerable<HttpPostedFileBase> fileUpload) { foreach (var file in fileUpload) { if (file == null) continue; string path = AppDomain.CurrentDomain.BaseDirectory + "UploadedFiles/"; string filename = Path.GetFileName(file.FileName); if (filename != null) file.SaveAs(Path.Combine(path, filename)); } return RedirectToAction("Index"); } 

Here are some important points:

• using the HttpPost attribute, we define an action that will only process POST requests;
• The IEnumerable < HttpPostedFileBase > fileUpload parameter is an enumeration of files that were sent by the user. Please note that the fileUpload name matches the value of the name attribute of form elements, including those that contain indexers [No.]. It is the presence of indexers that allows MVC3 to automatically assign an enumeration to the parameter.

As you can see again, the action code is no less trivial than the markup code.

Request size limit and web.config

In ASP.NET, there is a limit on the size of the request that can be sent to the server. This restriction is introduced, including for security reasons and to easily prevent attacks against the server by generating heavy requests. However, when creating functionality for uploading files to the server, especially when there are several of them and they can be large, you should first set the limit parameter to the desired value.

The parameter that controls the maximum request size is in the web.config:

 <system.web> <!--   --> <httpRuntime maxRequestLength="10000" /> 

The maxRequestLength parameter specifies the maximum size in kilobytes that the request can have. Thus, in the code above, a limit of ~ 10 megabytes per request is set. That is, the user can transfer a file or files of about ten megabytes in one request. Consider only that the request consists not only of data, but also of some binding, which also forms the data of the request. This harness is small, but it should be considered when calculating the required limit on the size of the request.

Project source code

You can download the source code of a working project for Visual Studio 2010 via this link .