ASP.NET File Upload Example
Jose M. EstebanMarch 28, 2001
Level: Beginner/Intermediate
Download Source Code
ASP.NET provides an easy mechanism to upload files from a Web Browser to a Web Server. The class HtmlInputFile allows to handle programmatically the information submitted by the INPUT control of the type file, e.g., <input type"file">. Remember that the Input control of type file is only available in Web Browsers that support HMTL 3.2 and later versions. This HTML version is supported by IE 3.02 and Netscape 3.0 and their later versions.
There are two objects that you will use to upload files. One is the INPUT control in the Web Browser and the other is the HtmlInputFile object in the server. The INPUT control will be embedded inside a form that will post the information encoded in a format suitable for a file transfer over the Internet. The INPUT control will also load the selected file into the Web Browser's memory, and will allow access to the HtmlInputFile object in the code that runs in the server through the INPUT control's ID. I.e., you use the ID of the INPUT control as the reference to the HtmlInputFile object in the code that runs at the server.
To upload a file, the form must post the data with the code format multiform/form-data instead of the default application/x-www-form-urlencoded that sends the form elements in a name/value pair base. This restriction arises from the types of formats that an object of the class HtmlInputFile is capable of processing and the characters that can traverse the Internet without confusing the network devices and software. The following example shows how to set the encoding format of a form:
<input type=file id=loFile enctype="multipart/form-data"
Once the data is submitted to the server, the object of the class HtmlInputFile exposes the property PostedFile, with an object of the type HttpPostedFile, that contains the raw file stream and the attributes of the file, such as, file length, file type, file name. But most important, the PostedFile object has the SaveAs method that allows to save the uploaded file to a local directory in the web server. You can also limit the type of the files you will allow users to upload by setting the Access property of the HtmlInputFile object, and you can also discard files base on the length by using the PostedFile.ContentLength property. The following example shows how to restrict the upload of video files. The ID loFile is the ID of the INPUT control.
loFile.Acess = "video/*"
The example that follows shows how to enable a web form for file uploads and how to answer back to the user with a message and information about the file that was just uploaded. The web form is contained in a panel (FileUploadForm) that is initially visible and the answer is presented in a panel (AnswerMsg) that is initially disable. Once the file is uploaded, the web form panel is set to invisible and the message panel is set to visible.
The event that handles the submitted form runs at the server as indicated by the Submit INPUT tag:
<input type="submit" value="Upload" OnServerClick="UploadFile_Clicked" runat="server" ID=Submit1>
The Directory and File classes allow to create a folder to contain the uploaded files and to get the name of the uploaded file filtering the path. In order to use this classes we need to include the System.IO name space, we can do so by including the import directive. This entry allows the upload the name space into the web form application, for more information on this topic read the article How to Manipulate Files in ASP.NET:
<%@ Import Namespace="System.IO" %>
For those of you that were familiar with uploading files in ASP, the HtmlInputFile class free us from the need of third party components to process the multipart data stream.
Demo this code
<%@ Import Namespace="System.IO" %> <html> <SCRIPT LANGUAGE="VB" RUNAT="SERVER" ID=SCRIPT1> Sub UploadFile_Clicked(Sender as Object, e as EventArgs) Dim lstrFileName as string Dim lstrFileNamePath as string Dim lstrFileFolder as string lstrFileFolder = "C:/TempUploadedFiles/" 'Gets the file name lstrFileName = loFile.PostedFile.FileName lstrFileName = File.GetFileNameFromPath(lstrFileName) 'Creates the folder if it does not exists If (not Directory.DirectoryExists(lstrFileFolder)) Then Directory.CreateDirectories(lstrFileFolder) End If 'Save Uploaded file to server lstrFileNamePath = lstrFileFolder & lstrFileName loFile.PostedFile.SaveAs(lstrFileNamePath) 'Sets the answer FileName.Text = lstrFileName FileType.Text = loFile.PostedFile.ContentType FileLength.Text = cStr(loFile.PostedFile.ContentLength) FileUploadForm.visible = false AnswerMsg.visible = true End sub </SCRIPT> <BODY> <ASP:panel id="FileUploadForm" visible="true" runat="server"> <form action="UploadFile.aspx" method="post" enctype="multipart/form-data" runat="server" ID=Form1> <h1>ASP.NET File Upload Example</h1> Select the File to Upload to the Server:<br> <input id="loFile" type="file" runat="server"><br> <input type="submit" value="Upload" OnServerClick="UploadFile_Clicked" runat="server" ID=Submit1> </form> </ASP:panel> <ASP:panel id="AnswerMsg" visible="false" runat="server"> Thanks your file <ASP:label id="FileName" runat="server" /> has been uploaded<BR> We received <ASP:label id="FileLength" runat="server" /> bytes of the type <ASP:label id="FileType" runat="server" /> </ASP:panel> </BODY> </HTML>
<script language=javascript> function submitFeedback() { window.open("", "feedbackwindow", "scrolling=no,center=yes,width=200,height=150,menubar=no,resizeable=no"); document.frmFeedback.submit(); return false; } </script>
