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.
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:
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.
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.
Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a production environment on a daily basis.