File Upload Control with ASP.NET and AJAX

ASP.NET Community

Rate me:

4.57/5 (5 votes)

11 Oct 2013CPOL1 min read

61.5K

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

This articles was originally at wiki.asp.net but has now been given a new home on CodeProject. Editing rights for this article has been set at Bronze or above, so please go in and edit and update this article to keep it fresh and relevant.

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:

<br /><%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><br /><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "<a href="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd</a>"><br /><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"><br /> <head runat="server"><br />  <title>Untitled Page</title><br /> </head><br /> <body><br />  <form id="form1" runat="server"><br />   <asp:ScriptManager ID="ScriptManager1" runat="server" /><br />   <div><br />    <table width="50%" cellpadding="2" cellspacing="0"><br />     <tr><br />      <td><br />       <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional"><br />        <ContentTemplate><br />         <asp:FileUpload ID="FileUpload1" runat="server" /><br />         <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" /><br />        </ContentTemplate><br />        <Triggers><br />         <asp:PostBackTrigger ControlID="btnUpload" />  <br />        </Triggers><br />       </asp:UpdatePanel><br />      </td><br />     </tr><br />    </table><br />   </div><br />  </form>  <br /> </body><br /></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:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/AsyncFileUpload/AsyncFileUpload.aspx

http://msmvps.com/blogs/luisabreu/archive/2006/12/14/uploading-files-without-a-full-postback.aspx

This article was originally posted at http://wiki.asp.net/page.aspx/1772/file-upload-control-with-aspnet-and-ajax

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

ASP.NET Community

United States

The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, ~~googling~~live-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.

The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.

This is a Collaborative Group

754 members

File Upload Control with ASP.NET and AJAX

Problem: How to use your Asp.Net Fileupload control with AJAX.

License

Comments and Discussions