Uploading In ASP.NET

Introduction
With classic ASP, uploading a file from the client to a server required one of three approaches: use of a third-party COM component, use of a custom-written component, or (messy) script code. The easiest option providing the most features was to use a third-party COM component, such as SA-FileUp or ASPUpload. Problems with using the COM model for Web application components are numerous. First off, these components must be registered (generally using the regsvr32.exe tool) before they can be used from a conventional ASP application. Remote administration of these types of applications is not possible, because the registration tool must be run locally on the server. These components remain locked on disk once they are loaded by an application, and the entire Web server must be stopped before these components can be replaced or removed. Furthermore, these third-party COM components cost money. (To learn about the various options for uploading files from the client to the Web server via a classic ASP page, be sure to check out the Uploading Article Index.)

ASP.NET easily allows developers to provide upload support without the need of any COM component. This is accomplished via the HtmlInputFile class in the .NET Framework. An instance of this class can be created and used easily through an ASP.NET Web page in just a few lines of code. In this article we'll examine how to upload a file from the client to the Web server using ths server control. We'll also examine how to add some extra functionality, such as creating the upload directory, if needed.

Prompting the User to Upload a File
To upload a file from the client to a server in an ASP.NET Web page we need to use a server-side form, but it is very important that this server-side form include the ENCTYPE="Multipart/Form-Data" attribute. Next, you need to create the HtmlInputFile class instance, which you can do using:

<input type="file" id="ID" runat="server" />

The runat="server" is very important, since it informs the ASP.NET engine that the input tag is, in actuality, an Html server control. The resulting Html rendered by this control is simply an input tag with its type set to file. This Html tag has the effect of displaying a textbox with a Browse button next to it. When the user clicks the Browse button, they are displayed a dialog from which they can select a file from their local computer.

So, to recap, the minimal code needed for uploading a file in ASP.NET would be:

<%-- The Web Form with the EncType property set to Multipart/Form-Data --%> <form Method="Post" EncType="Multipart/Form-Data" RunAt="Server"> <%-- The File upload Html control --%> Choose Your File To Upload <BR> <Input ID="MyFile" Type="File" RunAt="Server"> <BR> <%-- A button - when clicked the form is submitted and the Upload_Click event handler is fired... --%> <Input Type="Submit" Value="Upload" OnServerClick="Upload_Click" RunAt="Server"> ... </form>

The different attributes of HtmlInputFile control could be as follows:

<Input Type="File" RunAt="Server" ID="Specify an ID" Accept="Specify MIMEencodings" MaxLength="Specify maximum length of file path" Size="Specify width of textbox of the control" >

Note that using the HtmlFileInput Web control creates a textbox with a Browse button. The user can either enter the name of the file in the textbox or click the Browse button and select a file. Once the user has selected a file, the actual file upload does not occur until the Upload button is clicked. Clicking this button has the effect of submitting the form, which fires off the server-side event handler Upload_Click. It is in this event handler that we need to do the actual work of saving the file.

Saving the Uploaded File to the Web Server's File System
When the Upload button is clicked, the form is submitted and the server-side event handler Upload_Click is fired. In this event handler we need to perform the actual task of saving the file to the Web server's file system. This can be accomplished in one line of code. The method MyFile.PostedFile.SaveAs takes a single parameter - the path/filename to save the uploaded file to. (Here, MyFile is the name of the HtmlInputFile control.)

So, before we can save the uploaded file, we must know where to save the file to on the Web server's file system. For this example, let's save it to the C:\ServerFolder\ directory, and let's use the same filename as the uploaded file. To get the name of the uploaded file, we can use the FileName property of the PostedFile object. This property will return the entire filename, though, like C:\SomeClientFolder\Somefile.txt, and we just want to get the filename (just Somefile.txt. We can use the Path.GetFileName method to extract just the filename from the entire path.

Our entire Upload_Click event handler does two simple tasks. First, it extracts the filename of the uploaded file. Next, it saves this file to the C:\ServerFolder\ folder. If an error occurs during this process, an error message is displayed:

Sub Upload_Click(Sender as Object, e as EventArgs) ' Display properties of the uploaded file FileName.InnerHtml = MyFile.PostedFile.FileName FileContent.InnerHtml = MyFile.PostedFile.ContentType FileSize.InnerHtml = MyFile.PostedFile.ContentLength UploadDetails.visible = True 'Grab the file name from its fully qualified path at client Dim strFileName as string = MyFile.PostedFile.FileName ' only the attched file name not its path Dim c as string = System.IO.Path.GetFileName(strFileName) 'Save uploaded file to server at C:\ServerFolder\ Try MyFile.PostedFile.SaveAs("C:\ServerFolder\" + c) Span1.InnerHtml = "Your File Uploaded Sucessfully at server as: " & _ "C:\ServerFolder\" & c Catch Exp as exception Span1.InnerHtml = "An Error occured. Please check the attached file" UploadDetails.visible = false Span2.visible=false End Try End Sub

The Span1, Span2, FileName, FileContent, and FileSize variables in the above event handler refer to label Web controls that we've not examined yet. The purpose of these label Web controls is to provide information about the uploaded file...

When any attempt is made to upload without attaching a file or otherwise, a runtime exception is supposed to be thrown which will be caught by the exception Exp in our Try ... Catch block. As soon as this exception is caught the error message is displayed. The figure to the left shows a screenshot of a successfully uploaded file. Note that the uploaded file's type and size, along with where the file was saved on the Web server's file system, are shown.

Conclusion
There are a few other minor parts to this ASP.NET Web page that we did not explicitly examine in this article. For example, in the Page_Load event handler I have added some code to automatically create the C:\ServerFolder\ folder on the Web server's file system if it does not already exist. Furthermore, we did not touch upon the miscellaneous label controls that display information on the uploaded file. For a more in-depth look at these features, be sure to view the complete source code.

Happy Programming!