There are plenty of questions asked by developers around the globe that they are not able to use FileUpload asp.net control inside ASP.Net Ajax update panel. Their issues are FileUpload control inside Asp.Net Ajax update panel doesn’t hold any file and also return false for HasFile property whenever they upload any file.
Don’t worry! This is because the uploading and manipulations of files are restricted by default in client side for security purpose. That’s why this is not possible to upload files using asynchronous postback in UpdatePanel. you can do it just by changing the Trigger of the upload button from AsyncPostBackTrigger to PostBackTrigger.
Note – Asp.Net Controls that are reside in updatepanel, cause an async postback/update by default. That’s why the page will postback and get partial rendering. Now if for any reason you have control inside an updatepanel which you have to make a full postback rendering, then you need to set it explicitly as a postbacktrigger.
ASP.Net Webform(Aspx) Code :
To use ASP.Net Ajax, you have to add reference ajaxcontroltoolkit.dll in your solution first then you can use below code to upload a file.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FileUpload.aspx.cs" Inherits="Open_FileUpload" %>
<!DOCTYPE html>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
<div>
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:FileUpload ID="fileUpload" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
<br />
<asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Code behind .cs code :
For demo purpose, I am trying to allow the user to upload only jpg or jpeg images.
protected void btnUpload_Click(object sender, EventArgs e)
{
string filePath = string.Empty;
if (fileUpload.HasFile)
{
string fileExt = System.IO.Path.GetExtension(fileUpload.FileName);
if (fileExt.ToLower() != ".jpg" && fileExt.ToLower() != ".jpeg")
{
lblMsg.Text = "Upload JPG images only.";
lblMsg.ForeColor = System.Drawing.Color.Red;
return;
}
filePath = fileUpload.PostedFile.FileName;
if (File.Exists(filePath))
{
File.Delete(filePath);
}
fileUpload.PostedFile.SaveAs(Server.MapPath(@"../UploadedImages/" + filePath.Trim()));
}
#asp.net