ASP.NET Tip: ASP.NET 2.0 Introduces FileUpload Control

One of the things that always baffles me about ASP.NET is why some HTML controls (such as text boxes and images) have ASP.NET equivalents and others (such as the file upload control) don’t. ASP.NET 2.0 rectifies this situation with the new FileUpload control, which is designed to replace the input type=file control. While the HtmlInputFile control works fine in ASP.NET 2.0, the FileUpload control makes the implementation a bit cleaner.

Here’s a typical HTML and C# code sample that uses the old HtmlInputFile control to upload a file. This HTML would be surrounded with a form runat=server tag, as usual:

<table>
   <tr>
      <td>Select file:</td>
      <td><input type="file" runat="server" id="ctlFile"></td>
   </tr>
   <tr>
      <td colspan="2"><asp:LinkButton ID="btnSave" Runat="server">
         Save</asp:LinkButton></td>
   </tr>
</table>

Here’s the typical back-end C# code to process the uploaded file:

void btnSave_Click(object sender, EventArgs e)
{
   // Other validation code

   if (ctlFile.PostedFile.FileName == "")
      // display some sort of error
   else
      ctlFile.PostedFile.SaveAs("C:\Inetpub\wwwroot\
                                     somefilename.dat");

   // Other code to handle save routine
}

This code works quite well, with the minor exception of an inability to detect whether the user had selected a file. In this case, the FileName will be blank on the PostedFile property of the control but, because the file wasn’t posted, this is a bit awkward.

The new FileUpload control replaces the old control very easily. The new HTML looks like this:

<table>
   <tr>
      <td>Select file:</td>
      <td><asp:FileUpload runat="server" id="ctlFile"></td>
   </tr>
   <tr>
      <td colspan="2"><asp:LinkButton ID="btnSave" Runat="server">
         Save</asp:LinkButton></td>
   </tr>
</table>

Once ASP.NET defines the new placeholder variable for you, the FileUpload control has all the same features of the old control but also adds a few new features. For starters, you can use the new HasFile property of the control to indicate whether the user had selected a file to upload. This simplifies the validation code a bit, as shown here:

void btnSave_Click(object sender, EventArgs e)
{
   // Other validation code

   if (!ctlFile.HasFile)
      // display some sort of error
   else
      ctlFile.PostedFile.SaveAs("C:\Inetpub\wwwroot\
                                     somefilename.dat");

   // Other code to handle save routine
}

Once you are ready to save, you must provide a complete disk path to save your file. The Server.MapPath function can programmatically give you the path of the current file, based on where your code is installed on the web server. Alternatively, you can create a configuration setting to store your files. You also need to make sure that NTFS security on the server will allow your web site to write files to the selected location.

As a server control, the FileUpload control also includes all the standard properties, methods, and events of all controls that inherit from the Control class, including the ability to do data binding, which the old HtmlInputFile control wouldn’t do easily.

About the Author

Eric Smith is the owner of Northstar Computer Systems, a web-hosting company based in Indianapolis, Indiana. He is also a MCT and MCSD who has been developing with .NET since 2001. In addition, he has written or contributed to 12 books covering .NET, ASP, and Visual Basic. Send him your questions and feedback via e-mail at questions@techniquescentral.com.