One of the common queries I get across my sessions is that, the File Upload control doesnt work inside an Update panel. All of us would like to implement a Gmail File Upload kind of interface and when you try to implement a similar thing using UpdatePanel (which works like a charm for other activities), it simply doesn't work.
The behaviour is expected. The File Upload Control doesnt work inside an Update Panel due to security reasons and restrictions a browser implies. They dont allow Javascript files to directly access the files in an user's sytem and dont allow to modify or access the details of a file when working with the File Upload Control.
There are a couple of ways to solve this issue, one using Update Panel and Post Back Triggers and the other using Iframes.
1. Use Update Panel, File Upload Control and use a PostBackTrigger Control to force a postback only for the File Upload Control
This approach works well without much tweaking except for that, there would be a postback only for the File Upload Control. While the rest of the stuff happens asynchronously, using the UpdatePanel, when the user presses the "Upload" Button, the page will be refreshed. Let us examine how we can accomplish this. Place the following code within the <form> </form> tags in your ASP.NET Page.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Height="20px" onclick="Button1_Click" Text="Submit" Width="128px" />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<asp:FileUpload ID="FileUpload1" runat="server" />
<br />
<asp:Button ID="Button2" runat="server" Height="25px" onclick="Button2_Click" Text="Upload" Width="128px" />
<br />
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<br />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="Button2" />
</Triggers>
</asp:UpdatePanel>
In the Code behind, add the following lines of code:-
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = TextBox1.Text;
}
protected void Button2_Click(object sender, EventArgs e)
{
FileUpload1.PostedFile.SaveAs(@"C:\test\"+System.IO.Path.GetFileName(FileUpload1.PostedFile.FileName));
Label2.Text = FileUpload1.PostedFile.FileName;
}
If you run the above sample, you would notice that upon entering something in the TextBox and clicking "Submit" (Button1) the Label above the File Upload Content, shows the Text you typed, without a page refresh.
However, when you select a file and click on the "Upload" (Button2) Button, you would notice that a postback happens and the file gets posted to the "C:\Test\" folder and also the full path is specified in the Label 2.
In the above code, I have not taken any steps regarding validation, checking if file exists etc., since it just shows how you could accomplish File Upload within Update panel. In normal cases, you would write better code to accomplish a file upload feature.
2. Use Iframes and accomplish a truly Gmail Like File Upload Interface.
I thought of writing a post on this, but did a quick research and found that there are a few solutions posted by our MVPs / Community Folks and just thought of providing a link to the same.
http://vinayakshrestha.wordpress.com/2007/03/13/uploading-files-using-aspnet-ajax-extensions/
http://msmvps.com/blogs/luisabreu/archive/2006/12/14/uploading-files-without-a-full-postback.aspx
Note that this post doesnt claim any warranty / support for the above articles, though.
Cheers !!!
posted @ Tuesday, April 01, 2008 11:03 PM