Free Web Development Online Tutorials, Learn to Code
Learn Asp.net Aspx, Free Asp.net Tutorial in C#, Asp.net Web Application Development Guide

FileUpload Control in Asp.net Example

Here we learn how to upload file on web server in Asp.net application, add, upload, delete, and manage files, images in asp.net application.

How to upload files, images in Asp.net

ASP.NET provides two type of control to upload files on web server.

  • FileUpload - this is ASP.NET web control
  • HtmlInputFile - this is HTML server control

Both asp.net controls allow you to upload files, images, the difference is that FileUpload control sets the encoding of the form.
So, we look at both example with code syntax

FileUpload control in Asp.net

Let's write the html code, place one asp:FileUpload and a asp:Button control in your form

<form id="form1" runat="server">
<div>
<%=ViewState["result"] %>
</div>
<div style="padding: 15px;">
<asp:FileUpload ID="fuUser" runat="server" />
<asp:Button ID="btnUpload" Text="Upload File" runat="server" OnClick="btnUpload_Click" />
</div>
</form>

Now open your codebehind file, inside button click event write the following code

protected void btnUpload_Click(object sender, EventArgs e)
{
    string userFolderPath = Server.MapPath("~/userdocs");            
    if (fuUser.HasFile)
    {
        fuUser.SaveAs(userFolderPath + "/" + fuUser.FileName);
        ViewState["result"] = "File has been uploaded successfully";
    }
    else
    {
        ViewState["result"] = "Please select a file";
    }
}
    

Now above code will allow user to upload any type of file on your web server, which can be dangerous, so now we learn how to restrict all other file types other than the type we allow

Write the following RegularExpressionValidator control to check the file type before uploading

<asp:RegularExpressionValidator 
id="regexpFileUpLoadValidator" runat="server" 
ErrorMessage="Upload jpg, gif or png only." ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*)) (.jpg|.JPG|.gif|.GIF|.png|PNG)$" ControlToValidate="fuUser">
</asp:RegularExpressionValidator>

Now user can upload only jpg/png/gif file type

HtmlInputFile Example

Another way of uploading file is HttpPostedFile, actually this is how we used to upload file in classic asp days, let’s look at the same implementation Asp.net code.

Write the following code in your html

<input type="file" runat="server" id="fuControl" />
<asp:Button ID="btnFileUpload" Text="Upload File" runat="server" OnClick="btnFileUpload_Click"  />

Now here is the serverside code in button click event

protected void btnFileUpload_Click(object sender, EventArgs e)
{
    string userFolderPath = Server.MapPath("~/userdocs");
    HttpPostedFile _file = fuControl.PostedFile;

    if (_file != null)
    {
        _file.SaveAs(userFolderPath + "/" + _file.FileName);
        ViewState["result"] = "File has been uploaded successfully";
    }
}

The above code will allow user to upload all type of files. In earlier example we implemented a regular expression control to restrict other file type. But here we check the file type in server side code to make sure only images are allowed

HttpPostedFile _file = fuControl.PostedFile;
// check the following property 
if(_file.ContentType=="jpg" || _file.ContentType=="gif") { // then upload the file on server. }

You can allow file type as per your business requirement

Comment
Name
Email
Website
Subscribe
 
File uploading with Asp.net, FileUpload Control Example