Uploading Files Using HtmlInputFile

HtmlInputFile"-->

only for RuBoard

Uploading Files Using HtmlInputFile

ASP.NET provides an easy way to enable users to upload files to a server using the HtmlInputFile class. The HtmlInputFile class enables you to have programmatic access to the INPUT control of the FILE type. For those of you not familiar with what the File INPUT control is, see the following example:

 <input type="file" id="UploadFile"> 

When this control is inserted into your page, you'll receive the following when the page is rendered: a textbox with a button directly to the right of it with the text Browse on it.

Notice in Figure 13.1 that a Browse button is rendered along with a textbox . This enables the user to browse his local hard drive for a file to upload. Users using older browsers might not receive a button and would have to manually enter the path to the file. Notice I use the ID attribute of the Input control. This becomes important when we want programmatic access to the control. In this example I used UploadFile .

Figure 13.1. Rendered page with File INPUT control inserted.

When using the HtmlInputFile control, you must do three things for object posting to work properly. The first is to remember to put the Runat ="server" attribute within the Input controls starting and ending tags. The second is to assign an ID attribute to the HtmlInputFile control so you can access it programmatically. Finally, you have to set the enctype attribute of the FORM to multipart/form-data .

The HtmlInputFile HTML server control supports all the same style attributes as its HTML equivilant element does, but there are some additional attributes worth noting that the HtmlInputFile control supports. The following list contains the name and a short description of each:

• Accept ” The accept attribute enables you to get or set a comma separated list of MIME encodings that the user can upload. The following example allows all Images and Microsoft Windows Video files to be uploaded:

   <input type="file" runat="server" Accept="image/*,videa/x-msvideo" Id="UploadFile" /> 

  *This property is browser dependent.

• MaxLength ” The maximimum file length the user can enter in the textbox.

   <input type="file" runat="server" MaxLength="50" Id="UploadFile" /> 

  *This property is browser dependent.

• Size ” The width of the textbox that is rendered. The value is rendered as a percent, but is entered as an integer.

   <input type="file" runat="server" MaxLength="50" Id="UploadFile" /> 

Contained in Listing 13.1 is a basic code example illustrating the process of uploading an image to your web server using the HtmlInputFile control. I will be using images for all sample code in this chapter, although you can apply the same code towards other file types. In this example the image is not saved to a database; rather, it is saved directly to the server's hard drive.

Listing 13.1 Simple Image Uploading Example

 [VisualBasic.NET] 01: <%@ Import Namespace="System.IO" %> 02: <script language="vb" runat="server"> 03: 04:  public sub SubmitImage(sender as Object, e as EventArgs) 05: 06:   dim UpFile as HttpPostedFile = UP_FILE.PostedFile 07: 08:   if UpFile.ContentLength = nothing then 09: 10:    message.Text = "<b>* You must pick a file to upload</b>" 11: 12:   else 13: 14:    UpFile.SaveAs(Server.MapPath("images") & "/" & Path.GetFileName(UpFile.FileName)) 15:    message.Text = "<b>* Your image has been uploaded</b>" 16: 17:   end if 18: 19:  end sub 20: 21: </script> [C#.NET] 01: <%@ Import Namespace="System.IO" %> 02: <script language="c#" runat="server"> 03: 04:  void SubmitImage(Object sender, EventArgs e) { 05: 06:   HttpPostedFile UpFile = UP_FILE.PostedFile; 07: 08:   if (UpFile.ContentLength == 0) { 09: 10:    message.Text = "<b>* You must pick a file to upload</b>"; 11: 12:   }  else { 13: 14:    UpFile.SaveAs(Server.MapPath("images") + "/" + Path.GetFileName(UpFile.FileName)); 15:    message.Text = "<b>* Your image has been uploaded</b>"; 16: 17:   } 18: 19:  } 20: 21: </script> [VisualBasic.NET & C#.NET] 23: <html> 24: <body> 25: <form enctype="multipart/form-data" runat="server"> 26: <h1>Simple Upload to Hard Drive</h1> 27: <asp:Table runat="server" width="700" align="left" > 28:  <asp:TableRow> 29:   <asp:TableCell> 30:    <b>Upload New Image</b> 31:   </asp:TableCell> 32:   <asp:TableCell> 33:    <input type="file" id="UP_FILE" runat="server" 34:     Size="34" accept="image/*" /> 35:   </asp:TableCell> 36:  </asp:TableRow> 37:  <asp:TableRow> 38:   <asp:TableCell> 39:     &nbsp; 40:   </asp:TableCell> 41:   <asp:TableCell> 42:    <asp:Button runat="server" width="239" 43:     OnClick="SubmitImage" text="Upload Image"/> 44:   </asp:TableCell> 45:  </asp:TableRow> 46:  <asp:TableRow> 47:   <asp:TableCell> 48:     &nbsp; 49:   </asp:TableCell> 50:   <asp:TableCell> 51:    <asp:Label runat="server" id="message" 52:     forecolor="red" maintainstate="false" /> 53:   </asp:TableCell> 54:  </asp:TableRow> 55: </asp:Table> 56: 57: </form> 58: </body> 59: </html> 

For Listing 13.1 to work properly I created a sub-directory in the same folder that this web form exists. In this example I use a sub-directory named images , but you can name it anything you like. If you name the folder something other than images change the name used as a parameter in the Server.MapPath method on line 14 to reflect the change.

In lines 33 and 34 of Listing 13.1, you will see the HtmlInputFile control with an ID of UP_FILE . The Button control is used to submit the form (lines 42 and 43) and, when clicked, the SubmitImage method is executed on the server (lines 4 through 19). On line 6 I create a local HttpPostedFile object so it isn't necessary to drill down through the HtmlInputFile class to expose it ”I will dive deeper into the HttpPostedFile class in the next section. An if...then statement on line 8 makes sure an image/file was uploaded to the server by checking the UpFile ( HttpInputFile ) ContentLength (the size of the file in bytes). If it is found to be null, then a file wasn't uploaded to the server. If the ContentLength is not found to be null then a file with the size of at least 1 byte was uploaded. I then use the HttpPostedFile classes SaveAs method to save the file in the Images folder. An illustration of this page after an image was uploaded can be found in Figure 13.2.

Figure 13.2. After an image is uploaded, a message is printed out to the page, "Your image has been uploaded."

only for RuBoard