ASP.NET MVC Uploading and Downloading Files

If you come to ASP.NET MVC from a purely ASP.NET Web Forms background, one of the first things you are likely to notice is that all those nice easy Server Controls have disappeared. One of those is the FileUpload, and its absence seems to cause a few problems. This article looks at how to upload files to the server in an MVC world, and how to get them back from the server to the user again.

In Web Forms, when you drag a FileUpload control on to the designer, something happens when the page is rendered which you probably don't notice. The resulting html form that wraps the entire page is decorated with an extra attribute: enctype="multipart/form-data". The FileUpload itself is rendered as an html input type=file. Within an MVC View, there are a number of ways to set this up. The first is with HTML:


<form action="/" method="post" enctype="multipart/form-data">
  <input type="file" name="FileUpload1" /><br />
  <input type="submit" name="Submit" id="Submit" value="Upload" />
</form>

Notice that the <form> tag includes the enctype attribute, and method attribute of post. This is needed because the form by default will be submitted via the HTTP get method.  The following approach, using the Html.BeginForm() extension method renders the exact same html when the page is requested:


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

     <input type="file" name="FileUpload1" /><br />
     <input type="submit" name="Submit" id="Submit" value="Upload" />
}

Notice the name attribute of the <input type="file"> element. We'll come back to that shortly. In the meantime, the resulting page should look rather blandly like this:

OK. So we can now browse to a local file and click the submit button to upload it to the web server. What is needed next is some way to manage the file on the server. When using a FileUpload control, you generally see code that checks to see if a file actually has been uploaded, using the FileUpload.HasFile() method.  There isn't the same convenience when you are working with MVC, as you are much closer to the raw HTTP.  However, a quick extension method can take care of that:


public static bool HasFile(this HttpPostedFileBase file)
{
  return (file != null && file.ContentLength > 0) ? true : false;
}

When you look at Controller class, you see that it has a Request object as a property, which is of type HttpRequestBase. This is a wrapper for an HTTP request, and exposes many properties, including a Files collection (actually a collection of type HttpFileCollectionBase). Each item within the collection is of type HttpPostedFileBase. The extension method checks the item to make sure there's one there, and that it has some content. Essentially, this is identical to the way that the FileUpload.HasFile() method works.

Putting that into use within the Controller Action is quite simple:


public class HomeController : Controller
{
  public ActionResult Index()
  {
    foreach (string upload in Request.Files)
    {
      if (!Request.Files[upload].HasFile()) continue;
      string path = AppDomain.CurrentDomain.BaseDirectory + "uploads/";
      string filename = Path.GetFileName(Request.Files[upload].FileName);
      Request.Files[upload].SaveAs(Path.Combine(path, filename));
    }
    return View();
  }
}

Multiple File Uploading

You might already be ahead of me at this point, and wondering how you might make use of the fact that Request.Files is a collection. That suggests that it can accommodate more than one file, and indeed, it can. If you change the original View to this:


@using (Html.BeginForm("", "home", FormMethod.Post, new {enctype="multipart/form-data"})){
     <input type="file" name="FileUpload1" /><br />
     <input type="file" name="FileUpload2" /><br />
     <input type="file" name="FileUpload3" /><br />
     <input type="file" name="FileUpload4" /><br />
     <input type="file" name="FileUpload5" /><br />
     <input type="submit" name="Submit" id="Submit" value="Upload" />
}

you will end up with this:

The code in the controller Action already checks all file uploads, so no changes are needed for it to work with multiple file uploads. Notice that each input has a different name attribute. If you need to reference them individually, that is what you use. For example, to reference the third one, you would get at it using Request.Files["FileUpload3"].

Saving to a Database

Before you scream "Separation of Concerns!" at me, the next piece of code is purely illustrative. It features ADO.NET within a controller action. As we all know, this is simply not done. Database access code belongs to your data access layer somewhere inside the Model. However, the code should give people a starting point if they want to save uploaded files to a database. First of all, I have created a database (FileTest) and added a table: FileStore:

 

CREATE TABLE [dbo].[FileStore](
[ID] [int] IDENTITY(1,1) NOT NULL,
[FileContent] [image] NOT NULL,
[MimeType] [nvarchar](50) NOT NULL,
[FileName] [nvarchar](50) NOT NULL
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

The FileContent field is an image datatype, and is where the binary data that forms the file will be stored. The Index Action is changed to the following:


public ActionResult Index()
{
  foreach (string upload in Request.Files)
  {
    if (!Request.Files[upload].HasFile()) continue;

    string mimeType = Request.Files[upload].ContentType;
    Stream fileStream = Request.Files[upload].InputStream;
    string fileName = Path.GetFileName(Request.Files[upload].FileName);
    int fileLength = Request.Files[upload].ContentLength;
    byte[] fileData = new byte[fileLength];
    fileStream.Read(fileData, 0, fileLength);

    const string connect = @"Server=.\SQLExpress;Database=FileTest;Trusted_Connection=True;";
    using (var conn = new SqlConnection(connect))
    {
      var qry = "INSERT INTO FileStore (FileContent, MimeType, FileName) VALUES (@FileContent, @MimeType, @FileName)";
      var cmd = new SqlCommand(qry, conn);
      cmd.Parameters.AddWithValue("@FileContent", fileData);
      cmd.Parameters.AddWithValue("@MimeType", mimeType);
      cmd.Parameters.AddWithValue("@FileName", fileName);
      conn.Open();
      cmd.ExecuteNonQuery();
    }
  }
  return View();
}

The revised code still loops through as many uploads as are on the web page, and checks each one to see if it has file. From there, it extracts 3 pieces of information: the file name, the mime type (what type of file it is) and the actual binary data that is streamed as part of the HTTP Request. The binary data is transferred to a byte array, which is what is stored in the image datatype field in the database. The mime type and name are important for when the file is returned to a user. We shall look at that part next.

Serving Files to the User

How you deliver files back to users will depend on how you have stored them primarily. If you have them stored in a database, you will usually stream the file back to the user. If they are stored on a disk, you can either simply provide a hyperlink to them, or again, stream them. Whenever you need to stream a file to the browser, you will use one of the overloads of the File() method (instead of the View() method that has been used so far in the preceding examples). There are 3 different return types of the File() method: a FilePathResult, FileContentResult and a FileStreamResult. The first streams a file directly from disk; the second sends a byte array back to the client, while the third sends the contents of a Stream object which has been generated and opened.

If you remember, when saving the uploaded files into a database, we sent a byte array to the FileContent field. When we need to get that back, it will be as a byte array again. If you have been keeping up, this means that we can use one of the two overloads of File() that return a FileContentResult. If you want the name of the file to be meaningful, you will use the overload that takes 3 arguments - the byte array, the mime type and the file name:


public FileContentResult GetFile(int id)
{
  SqlDataReader rdr; byte[] fileContent = null; 
  string mimeType = "";string fileName = "";
  const string connect = @"Server=.\SQLExpress;Database=FileTest;Trusted_Connection=True;";

  using (var conn = new SqlConnection(connect))
  {
    var qry = "SELECT FileContent, MimeType, FileName FROM FileStore WHERE ID = @ID";
    var cmd = new SqlCommand(qry, conn);
    cmd.Parameters.AddWithValue("@ID", id);
    conn.Open();
    rdr = cmd.ExecuteReader();
    if (rdr.HasRows)
    {
      rdr.Read();
      fileContent = (byte[])rdr["FileContent"];
      mimeType = rdr["MimeType"].ToString();
      fileName = rdr["FileName"].ToString();
    }
  }
  return File(fileContent, mimeType, fileName);
}

The easiest way to invoke this method is to provide a hyperlink:


<a href="/GetFile/1">Click to get file</a>

If the files in the database are images, instead of a hyperlink, you just point to the controller action within the src attribute of an <img> element:


<img src="/GetFile/1" alt="My Image" />

We'll have a look at how to simply use the FilePathResult now. This is used to stream files directly from disk:


public FilePathResult GetFileFromDisk()
{
  string path = AppDomain.CurrentDomain.BaseDirectory + "uploads/";
  string fileName = "test.txt";
  return File(path + fileName, "text/plain", "test.txt");
}

And this is also invoked via a simple hyperlink:


<a href="/GetFileFromDisk">Click to get file</a>

The final option - FileStreamResult can be used to serve files from disk too:


public FileStreamResult StreamFileFromDisk()
{
  string path = AppDomain.CurrentDomain.BaseDirectory + "uploads/";
  string fileName = "test.txt";
  return File(new FileStream(path + fileName, FileMode.Open), "text/plain", fileName);
}

So what's the difference between FilePathResult and FileStreamResult and which one should you use? The main difference is that FilePathResult uses HttpResponse.TransmitFile to write the file to the http output. This method doesn't buffer the file in memory on the server, so it should be a better option for sending larger files. It's very much like the difference between using a DataReader or a DataSet. On the other hand, you might need to check the server you are hosting your site on, as a bug in TransmitFile may lead to partial delivery of files, or even complete failure. FileStreamResult is a great way of, for example, returning Chart images generated in memory by the ASP.NET Chart Controls without having to save them to disk.

Date Posted: Monday, December 21, 2009 10:29 PM
Last Updated: Friday, October 10, 2014 9:18 PM
Posted by: Mikesdotnetting
Total Views to date: 262267

18 Comments

Wednesday, December 23, 2009 9:57 AM - CareySon

hi,mike.
great post.very helpful

Thursday, January 7, 2010 10:02 AM - Stan4th

Hi,
thanks for this - I have a partial which is acting as the form which I am using jquery/ajax to put into a section of the current form.
I already have the Html.BeginForm construct for this but when I try to add this attribute it throws a runtime.
Do you know what is causing this?
Cheers

Friday, January 8, 2010 10:54 PM - Mike

@Stan4th

I couldn't even begin to guess since you don't say what the runtime error is. My suggestion is that you post a question with more detail about the error you are getting in the forums at www.asp.net.

Wednesday, January 13, 2010 6:34 PM - rob

any chance of adding support for jCrop, and a "ajax" style upload (via iFrame or whatever)? I have a complicated form, and I want to process the files before submit.

Wednesday, January 13, 2010 7:48 PM - Mike

@rob

I've added your request to my To Do list.

Sunday, February 21, 2010 5:50 PM - Dubb

Great article

Monday, February 22, 2010 3:56 PM - mnk

Nice post Mike.

Monday, February 22, 2010 9:24 PM - lynn

If you post an empty text file it's content length is 0. You may want to reconsider you check on that.

Thursday, February 25, 2010 7:53 PM - samah

Hi,

Is there a way to make an action return a file and changing the View at the same time?

Or is there a way we can return a file in a view?

Thanks,

Samah

Friday, February 26, 2010 6:17 PM - rickj

Great post haven't seen anyone do this in MVC I posted this problem on the forum about 10 months ago and no one answered it it will be nice to place pictures in a data base with MVC looking forward it playing with this article thanks

Friday, February 26, 2010 7:07 PM - Mike

@samah,

You asked that question in the right place: http://forums.asp.net/t/1529962.aspx and it has been answered there.

Friday, October 29, 2010 10:09 PM - Tara Walsh

Excellent tutorial. Helped me out a lot :) Well done!

Saturday, October 20, 2012 8:04 PM - Stuart Pegg

Thanks Mike: Much appreciated.

Thursday, March 7, 2013 7:13 AM - Hemavathi

Nice post... Helped me a lot

Tuesday, November 19, 2013 5:05 PM - gadam

How do you pass a dropdown value (other form data) along with the file to your action?

Thursday, December 26, 2013 10:44 PM - sam

You are brillant in asp.net and jquery fusion....awesome man keep it up.....

Monday, January 20, 2014 8:29 AM - raja k

Brilliant... Was struggling to get this done for the past 4 days, nights.. huff... what a relief i had now.. thank...

Just extending the questions here.. I can select files, store in db, fetch it back and download as well now... Now i have button to view apart from download. I would like to view the file and decide to download. Any help would be much appreciated. thank s again.

Friday, March 7, 2014 5:56 AM - Satyabrata Mohapatra

Another Gem....

Thanks a lot.
Add your comment

If you have any comments to make about this article, please use this form to do so. Make sure that your comment relates specifically to the article above. More general comments can be posted through the form on the Contact page.

Please note, all comments are moderated, and some may not be published. The kind of things that will ensure your comment is deleted without ever seeing the light of day are as follows:

  • Not relevant to the article
  • Gratuitous links to your own site or product
  • Anything abusive or libellous
  • Spam
  • Anything in a language I don't understand including gibberish.

I do not pass email addresses on to spammers, so a valid one will assist me in responding to you personally if required.