How to upload a file in an ASP.Net MVC 4 page

Here’s how I do a file upload on an ASP.Net MVC 4 page.

For this example, I’m using a controller named “HomeController”, with the view “Index”. When you click the “Submit” button on the view, it will be submitted to the “Save” method of HomeController.

Index.cshtml source code

Here’s the code for the view.

Notice the two additional parameters for BeginForm

FormMethod.Post, new {enctype = “multipart/form-data”}

You need those to have the file included in the HTTP Post action to the Save method on the controller.

Other than that, you just need a file input control, with a unique name attribute set.

HomeController view source code

Here’s the code to handle when the user submits the view page.

The Request object is a base object for handling HTTP requests. Since we set the FormMethod and enctype in the view, we have access to the file that was submitted on the page.

If the Request object isn’t null, we can check for the file by getting the HttpPostedFileBase from the Request object’s list of files, using its name (which is why a unique name was required for the file input control on the view).

Then we do some checking, to make sure the file actually has data, and get its information.

If you’re going to save the files somewhere (which is probably why you’re letting people upload files), then you’re going to need a way to display it for them later. To display a file within a browser, you need to know its ContentType. This will let the browser display it in the correct way.

With the byte array of the file’s contents, you can either save it to the database, in a varbinary column [for SQL Server], or write it out to disk, or some other document storage location.

Where you should save the files depends on what you’re going to do with them, how large they are, and what type of file they are.

EDIT: 28 April 2014

In the HomeController code, you’d add the “save” routine after line 25 (but still inside the “if” statement) – after you know you have a file with more than 0 bytes and after you’ve read the file stream.

The code to save the file isn’t here because there are several different ways you can save it, and several things you need to consider when deciding how and where to save the uploaded files.

For example:

  • How large will the files be?
  • How many files will the user upload to your website?
  • Will the user be changing/overwriting the file?
  • Do you need an audit log to track changes and/or previous versions of uploaded files?
  • Does your network have any security requirements (many financial companies do)?
  • What are you going to do to ensure the users don’t load any viruses or malicious executable code that could run on your server?

If it’s something small, such as a 10K jpeg a user wants to have as the avatar for their account profile, you might save the byte array to a varbinary column in the User table. It works the same as doing an insert or update of a string into a varchar column.

However, if you have someone uploading documents, or other types of files, you probably want to store them to a separate document server on your network. In the past, I’ve done that by writing a .Net remoting service on the document server. Nowadays, you might set up a WCF app on the document server.

WARNING: You don’t want to give your web app direct access to write files on another server in your network. That has the potential to be a big security problem.

Also, you definitely do not want to save the documents to your web server.

Besides being a serious security problem, experience has shown me that the network administrators will not be monitoring the amount of free disk space on your web server. You will eventually run out of disk on your web server and have another set of problems to deal with – including your website crashing.

Here’s a diagram of how you might have your network infrastructure set up for a document server. The web server is the only one visible to the Internet. You have your database server and document server behind a firewall – with rules that only let your website communicate with them.

Network diagram for website with a document server
Network diagram for website with a document server

12 thoughts on “How to upload a file in an ASP.Net MVC 4 page

  1. Hi,

    But where is file saved? I tried above example but nothing is happening. I mean only page is getting refreshed and in code everything is error free :). I need to read the file line by line.

    How to do that?

    1. I added some additional information to the post. See the “EDIT” section at the end.

      You’d add your code to save the file after line 25, in the HomeController code-behind page. I don’t have the code to do the save here, since there are several different ways to do it, depending on the requirements of your website and the types of files being uploaded. However, after line 25, you have the contents of the file in the fileBytes byte array variable. You can insert the byte array into a varbinary column in SQL Server, or send it some place to eventually write the bytes to disk.

  2. I have a Model class generated by NHibernate and it has a byte[] field. What code do I need to add to save the file on database?

    1. I haven’t used NHibernate. But when I saved a byte array to a database, I believe I set the column’s datatype to “varbinary(MAX)”, for MS SQL Server. I’m not sure how you’d set that up with NHibernate.

Comments are closed.