ASP.NET MVC and File Uploads

Published: 21 Jun 2010
By: Dino Esposito

Managing file uploads with ASP.NET MVC.

Contents [hide]


Not any Web applications need to upload a file, but any serious Web framework must provide some tooling for developers to write file upload functionalities quickly and comfortably. ASP.NET solved the issue by offering the FileUpload server control. Frankly, there’s not much that developers can invent when it comes to file uploads. Browsers offer some core functionality through their implementation of the <input type=file> element. Anything beyond this, though, would require some rich client side capabilities such as an ActiveX control, Silverlight or perhaps Flash. As long as you remain in the Web programming realm you are limited to using the basic browser provided file uploader which is in turn limited to uploading one file at a time.

ASP.NET MVC is only a new framework for ASP.NET programming; so it can’t really offer anything different from what you did with Web Forms. The model binding infrastructure, however, can help a bit to make the whole process of uploading and storing file content seamless.

Multi-part Input Forms

Let’s go through a typical example of file upload. Suppose you are writing a Web interface to let users register to a given community. You expect users to provide their account information and want them to choose a picture. So you have an action method like below that takes users to a registration page:

2.public ActionResult Register()
4.    return View();

The registration page shows a classic input form where a new user can specify its own name, email and upload a picture.

1.<% Html.BeginForm("Register", "User", FormMethod.Post,
2.                  new {enctype = "multipart/form-data"}); %>
3.    <%= Html.TextBox("Name") %>
4.    <%= Html.TextBox("Email") %>
5.    <input type="file" id="Picture" name="Picture" />
6.    <input type="submit" name="btnAdd" value="Add" />
7.<% Html.EndForm(); %>

HTTP dictates that any form expected to upload the content of a file must have the enctype attribute set to the multipart/form-data value. The enctype attribute specifies the content type used to submit (via post) the form to the server. The enctype attribute defaults to a value of application/x-www-form-urlencoded. The value must be changed to multipart/form-data when the form contains an <input> of type file. The reason is that a multipart form is allowed to contain any data type in its multiple parts – whether text, binary, or whatever else. The actual content and type are determined when the data is parsed out. You could even make multipart/form-data the default value for enctype in your forms but this would generate a bit more traffic (especially for headers) and is therefore preferable that you bring it in only when it’s strictly needed.

The user interface of the input file field depends on the browser and there’s not much you can do other than making it a bit more stylish via CSS. (Not all browsers let you style input file fields, however.) You are not allowed to write to the field via script; and when you attempt to read its content depending on the browser’s implementation either you get the sole file name (Firefox) or a fully qualified name with fake path (Internet Explorer).

The canonical behavior of the input file field element is showing the user an open-file dialog box, letting the user pick up a file from the local machine, and displaying the full path in the (read-only) text box. Next, when the multi-part form is submitted, the browser will pick up the file name and prepare HTTP packets that upload both plain text and file content – binary or text.

That’s all for the client side. Let’s turn our attention to the server.

Model Binding with Uploaded Files

The preceding form will post its content to the Register action of the User controller. Here’s a possible signature for the action method:

1.[HttpPost, ActionName("Register")]
2.public ActionResult Add(UserInputModel dto)
4.   :

The UserInputModel class indicates a data transfer object that will collect the data being posted to the server. The following template will work well with native ASP.NET MVC model binding.

01.public class UserInputModel
03.    // User name
04.    public String Name { get; set; }
05.    // User email address
06.    public String Email { get; set; }
07.    // Name of the JPG file with the user's picture
08.    public String Picture { get; set; }

As expected, the Name and Email members will receive the value of matching input fields. What about the Picture member? The default model binder will try to bind it to the output posted by the Picture field. The Picture uploads the entire content of the selected file. Here’s an excerpt from the request packet:

02.Content-Disposition: form-data; name="Name"
05.Content-Disposition: form-data; name="Email"
08.Content-Disposition: form-data; name="Picture"; filename="dinoe.jpg"
09.Content-Type: image/jpeg

The content for the Picture field is not a scalar value. ASP.NET MVC will render it through an HttpPostedFileBase object. This means that if you define Picture as a String member (meaning you want it to contain the file name) it will receive instead the output of the ToString method as defined by the HttpPostedFileBase class. This default behavior can be modified by creating a custom value provider for posted files that resolves the match using a different logic and storing the file name to the matching property. The key point, however, seems to be quite another.

When you upload a form like the one discussed here you want to achieve two main goals. First, you want to know the name of the image and store it in the database. Second, you want to save the actual file content somewhere on the server – either as a server file or into some database table. Modifying the value provider to bind the file name directly to the property is not enough. In addition, you still need to access the ASP.NET representation of the posted file to save it in some way. You still need code like the one shown below:

01.public ActionResult Add(UserInputModel dto)
03.    var destinationFolder = Server.MapPath("/Users");
04.    foreach (var name in Request.Files)
05.    {
06.        var postedFile = Request.Files[name];
07.        if (postedFile.ContentLength > 0)
08.        {
09.            var fileName = Path.GetFileName(postedFile.FileName);
10.            var path = Path.Combine(destinationFolder, fileName);
11.            postedFile.SaveAs(path);
12.        }
13.    }
14.    return View();

The code loops through any posted files and for each occurrence builds a server path and saves the uploaded content. The list of uploaded files is reached through the Files collection of the Request object. This code is exactly the same you would write for a classic ASP.NET application.

What ASP.NET MVC allows you to do with a different style is the retrieval of the files. You can do that through the members of the method parameter. You change the definition of the UserInputModel class as follows:

01.public class UserInputModel
03.    // User name
04.    public String Name { get; set; }
05.    // User email address
06.    public String Email { get; set; }
07.    // Reference to the uploaded file
08.    public HttpPostedFileBase Picture { get; set; }

Now that the Picture member has the matching type the file value provider can easily assign it an instance of the HttpPostedFileBase object created by the ASP.NET runtime. The result is that now you can write the following code to process the action:

01.public ActionResult Add(UserInputModel dto)
03.    var destinationFolder = Server.MapPath("/Users");
04.    var postedFile = dto.Picture;
05.    if (postedFile.ContentLength > 0)
06.    {
07.        var fileName = Path.GetFileName(postedFile.FileName);
08.        var path = Path.Combine(destinationFolder, fileName);
09.        postedFile.SaveAs(path);
10.    }
11.    return View();

The net effect doesn’t really change, but the code is a bit more abstract and in line with the model binding approach.

A Few Things to Keep in Mind

Any uploaded files will be likely saved somewhere on the server. It should be noted that creating files on the Web server is not usually an operation that can be accomplished standing the default permission set. Any ASP.NET application runs under the account of the worker process serving the application pool the application belongs to. Under normal circumstances, this account is NETWORK SERVICE and it isn’t granted the permission to create new files. This means that the previous won’t work unless you either change the account behind the ASP.NET application or elevate the privileges of the default account.

For years, the identity of the application pool has been a fixed identity–the aforementioned NETWORKSERVICE account, a relatively low-privileged built-in identity in Windows. Originally welcomed as an excellent security measure, the use of a single account for a potentially high number of concurrently running services in the end created more troubles than it helped to solve. In a nutshell, services running under the same account could tamper each other. For this reason, in IIS 7.5, worker processes by default run under unique identities automatically and transparently created for each newly created application pool. The underlying technology is known as Virtual Accounts and is currently supported by Windows Server 2008 R2 and Windows 7. For more information, have a look at

Another point that may be source of headaches is the maximum size of the request and subsequently the maximum size allowed for your uploads. By default, any ASP.NET request can’t be longer than 4 MB. This amount should include any uploads, headers, body and whatever is being transmitted. The value is configurable at various levels. You do that through the maxRequestLength entry in the httpRuntime section of the web.config file:

2.   <httpRuntime maxRequestLength="6000" />

It goes without saying that the larger a request can be, the more you potentially leave room the hackers to prepare attacks to your site. Finally, note that in a hosting scenario your application level settings may be ignored if the hoster has set a different limit at the domain level and locked down the maxRequestLength property at lower levels.

Multiple File Uploads

What about multiple file uploads? As long as the overall size of all uploads is compatible with the current maximum length of a request, you are allowed to upload multiple files within a single request. However, consider that Web browsers just don’t know how to upload multiple files. All a Web browser can do is uploading a single file and only if you reference it through an input element of type file. To upload multiple files, you can resort to some client side ad hoc component or place multiple INPUT elements in the form. If multiple INPUT elements are placed, and properly named, the following class will bind them all:

1.public class UserInputModel
3.    public String Name { get; set; }
4.    public String Email { get; set; }
5.    public HttpPostedFileBase Picture { get; set; }
6.    public IList<HttpPostedFileBase> AlternatePictures { get; set; }

The class represents the data posted for a new user with a default picture and a list of alternate pictures. The markup for alternate pictures is below:

1.<input type="file" id="AlternatePictures[0]" name="AlternatePictures[0]" />
2.<input type="file" id="AlternatePictures[1]" name="AlternatePictures[1]" />

In ASP.NET MVC, model binding does the trick!


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do

Você está comentando utilizando sua conta Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )


Conectando a %s