How to Use FileUpload Control to Save the File to the Server

  • Article

 

One of the new controls in ASP.NET 2.0 is the FileUpload control. This is a powerful control which makes it much easier than any time that to upload files from client side to server with only few lines of code.

The FileUpload control can be found on the Standard tab of the Toolbox in either Visual Studio 2005 or Visual Studio 2008.

When we drag it to a web page from the Toolbox, Visual Studio will automatically locate such a snippet of code to the HTML source page where we drop this item.

 

<asp:FileUpload ID="FileUpload1" runat="server" />

 

Besides the FileUpload control, to upload a file, we also need a Button control in the page. This is because the FileUpload control cannot save the file to the server itself after the user select the file. Another control, typically like a Button, is required here to do the submit so that the file can be posted to the server.

So, if we need to design the file uploading feature, we need two controls: a FileUpload control and a Button. After building the page, it may look like the screen shot below.

Here is the complete HTML source code of this sample page.

 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:FileUpload ID="FileUpload1" runat="server" />

        <asp:Button ID="Button1" runat="server" Text="Button" />

    </div>

    </form>

</body>

</html>

 

The last thing needed to do to achieve the feature of uploading files is merely to write few lines of simple codes to the Click event handler of the Button1, which cannot be any simpler.

 

Protected Sub Button1_Click(ByVal sender As Object, _

  ByVal e As System.EventArgs) _

                            Handles Button1.Click

    If FileUpload1.HasFile Then

        FileUpload1.SaveAs(Server.MapPath(FileUpload1.FileName))

    End If

End Sub

 

The code verifies that the FileUpload control does contain a file first by checking the result of FileUpload.HasFile property. If the FileUpload control is left blank on the form, this property will return false to tell that no file has been selected. Once there is a file in the FileUpload control, the code calls the SaveAs method of the FileUpload controls to save the file to the server. Also, the file is not required to retain its old name, which means we can, for example, rename it according to the uploading date to make the file easier to be identified and to be protected from overwriting.

As a conclusion, using FileUpload control to save the file to the server only needs two steps.

1. Add a FileUpload and a Button into the page

2. Use FileUpload.SaveAs method to save the file to the server.

Really simple, isn’t it?

For a more complete demo, please refer to the sample named VBASPNETFileUpload in All-In-One Code Framework project at https://cfx.codeplex.com/. The complete demo also illustrates how to fetch basic information of the file to upload using FileUpload.PostedFile property, including the size, the content type and so on.