Wednesday, 20 July 2011

Using the FileUpload Control with ASP.NET 4.0 and C#


This tutorial will demonstrate how to upload a file using the file upload control with ASP.NET 4.0 and C#.

Creating the Web Site
For this tutorial we will create a simple web site that will allow us to upload files to a specific folder within the web site's file structure. At this point, I have create a new ASP.NET Empty Web Site. The first thing we will need to do is setup a folder local to our web site to which we will save the uploaded files. To begin:
  1. Right click the project in your solution explorer.
  2. Select New Folder.
  3. Name the folder 'Files'.
We stand behind Server Intellect and their support team. They offer dedicated servers , and they are now offering cloud hosting

Next, we need to setup the web page that the user will upload files with. For this, we will be adding in a file upload control and a button. To do this:
  1. Right click the project in your solution explorer.
  2. Select add new item...
  3. Select a web form.
  4. Name it 'Default.aspx'.
  5. Open Default.aspx up to design mode.
  6. Drag and drop a fileupload control onto the web form.
  7. Add a break line after the fileupload.
  8. Drag and drop a button underneath the fileupload.
  9. Change the ID property to 'btnUpload'.
  10. Change the Text property to 'Upload'.
This form will allow the user to select a file and then click upload to actually upload it to the web site.

If you're looking for a really good web host, try Server Intellect - we found the setup procedure and their control panel, very easy to adapt to and their IT team is awesome!

Uploading Files
Next, we need to add some C# code that will actually upload a file in the event that the upload button is clicked and a file has been selected. To do this:
  1. Open up Default.aspx to design mode.
  2. Double click btnUpload to generate the click event method for it.
  3. Add the following using statements at the top of the Default.aspx.cs class:
    using System.IO;
  4. Add the following code to the btnUpload_Click event method:
    protected void btnUpload_Click(object sender, EventArgs e)
    {
        //check to make sure a file is selected
        if (FileUpload1.HasFile)
        {
            //create the path to save the file to
            string fileName = Path.Combine(Server.MapPath("~/Files"), FileUpload1.FileName);
            //save the file to our local path
            FileUpload1.SaveAs(fileName);
        }
    }
Testing
To test this out, load up the web site and:
  1. Click browse.
  2. Select a file.
  3. Click open.
  4. Click upload.
  5. Close the web site.
Yes, it is possible to find a good web host. Sometimes it takes a while to find one you are comfortable with. After trying several, we went with Server Intellect and have been very happy thus far. They are by far the most professional, customer service friendly and technically knowledgeable host we've found so far.

What this has done is uploaded the file that you selected to the Files folder of our web site. To view the file that was uploaded, open up your solution explorer and click the refresh icon. The file should now be listed in your files folder.

The Default.aspx source looks like this:
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <br />
        <asp:Button ID="btnUpload" runat="server" Text="Upload" 
            onclick="btnUpload_Click" />
    </div>
    </form>
</body>

No comments:

Post a Comment