How to use FileUpload
Control in Update Panel using Asp.Net
Problem: FileUpload
control is not working in update panel in Asp.Net. I will also explain the
reason and solution of this problem.
Describe
and Reason: The FileUpload control doesn’t work for
uploading image using Asynchronous postback when placed in the Update Panel
since FileUpload control required full postback to get the image. If you check
FileUpload1.HasFile method or FileUpload1.FileName property then it is null.
That is because the update panel does not retain the file inside the FileUpoad
control.
Solution: So to solve the issue we need to set the Button that is
uploading the image to be PostBackTrigger instead of AsyncPostBackTrigger. By
doing so the upload button will cause the full post back and get and retain the
image in the FileUpload control whenever clicked on.
So
set it as:
<Triggers>
<asp:PostBackTrigger ControlID="btnUploadImage"
/>
</Triggers>
Code for Default.aspx …………………………………………………………………….
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width:250px;">
<legend><b><i>Upload file example in asp.net</i></b></legend>
<asp:ScriptManager ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<table>
<tr>
<td>
<asp:UpdatePanel ID="UpdatePanel1"
runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1"
runat="server"
/>
<asp:Button ID="btnUploadImage"
runat="server"
Text="Upload"
onclick="btnUploadImage_Click" /><br
/>
<asp:Image ID="ImageShow"
runat="server"
Width="150px"
/>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUploadImage"
/>
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
Code for Default.aspx.cs…………………………………………………………………….
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default :
System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs
e)
{
}
protected void
btnUploadImage_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
string ImgPath = Server.MapPath("~/Images/" + Guid.NewGuid()
+ FileUpload1.FileName);
FileUpload1.SaveAs(ImgPath);
string ShowImgPath = ImgPath.Substring(ImgPath.LastIndexOf("\\"));
ImageShow.ImageUrl
= "~/Images" + ShowImgPath;
}
else
{
ScriptManager.RegisterStartupScript(this, this.GetType(),
"Message", "alert('Please upload Image');", true);
}
}
}
thanks sir
ReplyDelete