File Upload Control with ASP.NET and AJAX
Problem: How to use your Asp.Net Fileupload control with AJAX.
As everybody knows who uses ajax in his daily programming is, ajax don't postback the whole page, AJAX allows the webpage to update Asynchronously.
Lots of us create our applications in asp.net and use fileuplod control to upload files on server side. In such case if we are using ajax with fileupload control, then we find out that null value in our fileupload control(empty HttpFileCollection), its because of the fileupload control which needs a complete postback to upload file.
The FileUpload control does not work inside an UpdatePanel control for uploading files using Asynchronous Postback. It is due to security imposed by browser which doesnot allow JavaScript to directly access the files in user system. But defenately, Synchronous Postback can be used to upload files. ASP.NET AJAX allows both Synchronous and Asynchronous Postback.
So, "You cannot use Partial Postback to upload files on server, you have to use full post back".
Below is the 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="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
using System;
using System.Data;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnUpload_Click(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
FileUpload1.SaveAs(MapPath("~/TEST/" + FileUpload1.FileName));
}
}
}
Now, AJAX Asynchronous File Upload Control is available to upload files with Post back.
REF:
Revision number 4, Thursday, August 23, 2012 10:10:29 AM by JayantSharma
You must Login to comment.
|
Fri, Apr 20, 2012 7:52 AM
by maximus392
|
Will it work if the page contains other server side controls also such as checkbox, radiobutton etc..
|
|
Thu, Apr 26, 2012 5:10 AM
by morefays
|
Nice Trick tell me it will work with other controls which need complete postback.
|
|
Wed, Aug 22, 2012 1:07 PM
by jayantsharma
|
where is the moderator of this forum. I have edited this article and add some more stuff about a week ago but still it is in moderation phase.
|
New
Sun, Feb 17, 2008 3:31 AM
by
|
FileUpload
Asp.Net 2.0 introduced a new control called FileUpload that is used to upload files from the client browser to the server. Video Simple File Uploads in ASP.NET Multiple File Uploads in ASP.NET Multiple File Uploads in ASP.NET (Elaborated) File Uploads with
|