Most Web sites collect data via Web pages—this includes
everything from collecting user feedback to posting blog
content. It’s good to be able to gather text; however, it’s often necessary to
collect more robust elements. For instance, many career sites gather resumes
that job seekers submit as Word documents. The functionality of uploading files
is readily available in standard HTML, but there are a few added features
available when you’re working with ASP.NET.

The input tag

The standard HTML input tag supports the file type
attribute, which makes it possible to upload a file to a Web server. Here is
the format for the tag:

<input type="file" name="fileUpload" />

You place the input tag inside an HTML form element. The
code in Listing A
shows the file upload control used within an ASP.NET page.

Using the upload tag within an ASP.NET page requires two
additional attributes: id and runat. The id attribute
accesses the element programmatically, and the runat
attribute signals where to process the element. The runat
attribute is set to server, so it is processed by the Web server. In addition,
the HTML contains additional elements for aligning the items on the page and a
button for submitting the form.

Weekly .NET tips in your inbox

TechRepublic’s free .NET newsletter, delivered each Wednesday, contains useful tips and coding examples on topics such as Web services, ASP.NET, ADO.NET, and Visual Studio .NET.

Automatically sign up today!

The file upload input element allows the user two options
for selecting the file to upload: type the file path in the input text box, or
select the Browse button to choose it from the local file system. Once the user
specifies the file, the Submit button is selected and the Web server takes
over. (Code is necessary to process the request and handle the uploaded file
accordingly.)

Uploading with ASP.NET

There are several ways to handle file uploading with
ASP.NET, so let’s examine a few scenarios. The most rudimentary approach is to
use the properties and methods of the upload input control. These are the
methods and properties of the HTML input control:

  • FileName: The fully-qualified name of the
    file on the client’s computer. This will contain the local path of the
    uploaded file.
  • ContentLength: The size of the uploaded file
    (in bytes).
  • ContentType: The MIME content type of the
    uploaded file.
  • InputStream: Returns a Stream object pointing
    to the uploaded file. It allows you to read the contents of the file.
  • SaveAs: Facilitates saving the contents
    of the uploaded file.

The C# example in
Listing B extends our first code sample to process the uploaded file. (Listing C contains the equivalent
example in VB.NET.) The page posts back to itself to process the uploaded file.
The ContentLength property allows you to avoid
uploading empty files. The FileName property saves
the file locally with string methods used to extract the filename from the
local path of the file. The SaveAs method saves the
file in a folder on the Web server. Processing the uploaded file is triggered
by the btnSubmit button with its ASP.NET OnServerClick event pointing to the method on the form.

The code utilizes the HtmlInputFile
and HttpPostedFile classes. The complete path for
these classes (with their assemblies) is:

  • System.Web.UI.HtmlControls.HtmlInputFile
  • System.Web.HttpPostedFile

The HtmlInputFile object is
created when the input file element is used (which in our examples is fileUpload). An HttpPostedFile
object is created once a file is submitted to the server by the form (and HtmlInputFile object). The HttpPostedFile
object is only available during a page’s postback
event.

The HtmlInputFile object
corresponds to the HTML file input element. You can access it by the name
specified with the id attribute; it has the following properties:

  • PostedFile: Content of uploaded file.
  • Accept: Comma-delimited list of
    MIME types that specifies file types that may be submitted.
  • MaxLength: The maximum filename length
    (including path) that may be submitted.
  • Size: The width of the textbox
    where users enter/select file to upload.

Once you select the file, you can use code to save the file.
The PostedFile property of the HtmlinputFile
control signals whether a file is available. The example code works well when
the page submitting the files is the same as the page processing uploads, but
this is not always the case. Let’s take a look at processing file upload
submissions in a separate page.

Handling uploads in separate pages

One of my recent projects utilized a Flash-based interface
to gather user feedback and upload files. The Flash object was contained in an
HTML file, while processing of uploads and content was located in an ASP.NET
page. The .NET Framework makes this process simple.

The ASP.NET Request object contains everything submitted by
a client. The Files property of the Request class provides easy access to
client-uploaded files. The Files property returns an instance of the HttpFileCollection class, which is a collection of HttpPostedFile objects (i.e., the files submitted by the
user). These two classes make it easy to process incoming files. The C# example
in Listing D demonstrates how this
may be accomplished. (Listing E
contains the equivalent example in VB.NET.)

The code retrieves the collection of uploaded files via the HttpFileCollection object and processes each upload as an HttpPostedFile object via a for
loop. The SaveAs method is called on each object to
save it to on the Web server.

A Web page may call the script via the form’s action
attribute. It should point to the ASP.NET page. The HTML in Listing F is a sample.

Security

You should set up the folders on your Web server to handle
saving files in the directory specified in your code. In addition, you want to
restrict the type of files that are uploaded; for instance, you don’t want
malicious code, large videos, and so forth bogging down the server.

You may utilize the file’s MIME type to restrict
what types of files users submit. The HTML
standard includes an action attribute of the input element. You can use it
to restrict what a user may upload by including the legal MIME types. See Listing G.

All Web clients do not support the accept attribute, so a
code-based solution is more reliable. The code in Listing H alters the first example to accept only Word documents.
The file will only save if the uploaded file’s content type is the MIME type
for Microsoft Word (application/msword).

Although the code restricts the type of file uploaded, the
file type is determined by the file extension, which may easily be altered by a
user or application.

Accept all files

Accepting file uploads is a standard Web practice that
hasn’t changed much since the inception of the upload input element; however,
ASP.NET simplifies the process of working with the submitted files. You can
easily process submissions inside an ASP.NET page or via a standard HTML form,
as well as restrict what the user may upload.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

Miss a column?

Check out the .NET Archive, and catch up on the most recent editions of Tony Patton’s column.