Wednesday, August 19, 2009

How to Use FileUpload Control in ASP.Net 3.5

The File Upload Control is designed for applications that let you upload files to the website. This might be photos, documents and other files. This control displays a text box that lets the user enter the path for the file to be uploaded, plus a Browse button that displays a dialog box that lets the user locate and select the file.

To upload a selected file, you must also provide a separate control that results in a postback, like the Upload Button in the figure below. When the user clicks this button, the page is posted and the file selected by the user is sent to the server along with the HTTP request.



The ASPX code used to implement this example:



The Click event procedure of the Upload button:

Protected Sub btnUpload_Click(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles btnUpload.Click

Dim sizeLimit As Integer = 150000 'Size limit of uploaded file is only 15KB
If fuCustList.HasFile Then
If fuCustList.PostedFile.ContentLength <= sizeLimit Then
Dim path As String = “C:\Uploads\” & fuCustList.FileName
fuCustList.SaveAs(path)
lblMessage.Text = “File uploaded to “ & path
Else
lblMessage.Text = “File exceeds size limit.”
End If
End If
End Sub

The example in the figure above shows the aspx code that declares the file upload control named “fuCustList”, Upload button named “btnUpload” and the Label control named “lblMessage”. Note here that the file upload control doesn’t include an attribute that specifies where the file should be saved on the server. That’s because the file upload control doesn’t automatically save the uploaded file. Instead, you must write code that calls the SaveAs method of this control. The second example in the above figure shows how to write this code.

Before you call the SaveAs method, you should test the HasFile property if indeed there is a selected file by the user. If the user selected a valid file and it was successfully uploaded to the server, the HasFile property will be true. Then, you can use the FileName property to get the name of the selected file, and you can combine the file name with the path where you want the file saved. In this example, the file is stored in C:\Uploads directory.

To show the use of PostedFile.ContentLength property, the event procedure in this figure uses this property to determine the size of the uploaded file. Then, if the value exceeds the limit set by the sizeLimit variable, this file isn’t saved. Instead, an error message is displayed by the Label control in this example.

Properties and Methods of the FileUpload Class

Property & Description

HasFile - If Tue, the user has selected a file to upload
FileName - The name of the file to be uploaded
PostedFile - The HTTPPostedFile object that represents the file that was posted. You can use this object’s ContentLength property to determine the size of the file.

Method & Description

SaveAs(string) - Saves the posted file to the specified path

2 comments:

  1. Is it possible to upload 1-3 images plus a textbox and save everything to a database, all with one button click? So a user writes a story in the textbox and then selects up to 3 images from his local computer and clicks a button and everything goes up to our server and is saved in an SQL Server database table.

    ReplyDelete
  2. Yes it's possible of course. You have to automate the process of inserting the photos. But it's better if you are not going to store the image in SQL Server database. Only the link of the photos. Store the image in File Server instead.

    ReplyDelete