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

FileUpload Control in Example

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

How to upload files, images in

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 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

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

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

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";
        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

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">

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 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

File uploading with, FileUpload Control Example