FileUpload Control in Update Panel using ASP.NET AJAX

Purushottam Rathore
13y
252.2k
0
1

Article

The FileUpload control will not work inside an UpdatePanel control for uploading files using Asynchronous postback. This is because file uploading and file manipulations are restricted by default in the client side for security reasons. Hence it is not possible to upload files using asynchronous postback in UpdatePanel.

File upload controls do not work in AJAX update panels and the upload control needs to do full page postback. This means that if your upload control is located in an update panel, then the control does not post the file. If you look to the posted file property of the control, you will see it is null. So, the control always has to post full page postback.

To resolve this problem we need to rely upon a standard postback i.e. we need to set the button that is uploading the file to be PostBack trigger instead of AsyncPostBack trigger. This will initiate a normal postback whenever we click the upload button and then it is possible to upload the file.

You need to create a PostBackTrigger for the button that initiates postback like as follows.
<Triggers>
<asp:PostBackTrigger ControlID="Upload" />
</Triggers>

For Example:

InLine Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<table width="50%" cellpadding="2" cellspacing="0">
<tr>
<td>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Upload" runat="server" Text="Upload" OnClick="Upload_Click" /><br />
<asp:Image ID="NormalImage" runat="server" /></ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="Upload" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
CodeBehind code:
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void Upload_Click(object sender, EventArgs e)
    {
        if (FileUpload1.HasFile)
        {
            FileUpload1.SaveAs(MapPath("~/Image/" + FileUpload1.FileName));
            System.Drawing.Image img1 = System.Drawing.Image.FromFile(MapPath("~/image/") + FileUpload1.FileName);
            NormalImage.ImageUrl = "~/Image/" + FileUpload1.FileName;
        }
    }
}

Output:

Up Next

Ebook Download

View all

Node Js and Angular CheatSheet

Read by 26 people

Download Now!

Learn

View all