RadUpload for ASP.NET

Uploading Files with AJAX Send comments on this topic.
AJAX Support > Uploading Files with AJAX

Glossary Item Box

RadUpload cannot upload files using AJAX calls. This is a limitation of the XmlHttpRequest component, used in all AJAX frameworks for asynchronous calls to the application. In order to upload a file you should perform a full page postback.

If you have automatically AJAX-enabled button or other control, which normally does postbacks, placed in UpdatePanel, RadAjaxPanel, RadGrid you could use one of the following workarounds to make the button to perform postbacks again.

Workaround for ASP.NET AJAX

You need to create a PostBackTrigger for the button which should initiate postback.

<asp:updatepanel runat="server" id="UpdatePanel1">
  <contenttemplate>
    <rad:radupload runat="server" id="RadUpload1" />
    <asp:button runat="server" id="ButtonSubmit" text="Postback" />
  </contenttemplate>
  <triggers>
    <asp:postbacktrigger controlid="ButtonSubmit" />
  </triggers>
</asp:updatepanel>

Workaround for RadAjaxPanel

Attach an event handler on the OnRequestStart client-side event of the RadAjaxPanel, which will disable the AJAX functionality if a specific button is clicked.

Note: The EventTarget property of the args parameter will contain the UniqueID of the clicked button.

<script type="text/javascript">
//on upload button click temporarily disables ajax to perform upload actions
function conditionalPostback(sender, args)
{
  if(args.EventTarget == "<%= ButtonSubmit.UniqueID %>")
  {
    args.EnableAjax = false;
  }
}
</script>
<rada:radajaxpanel runat="server" id="RadAjaxPanel1"
  clientevents-onrequeststart="conditionalPostback">
  <rad:radupload runat="server" id="RadUpload1" />
  <asp:button id="ButtonSubmit" runat="server" text="Upload" />
</rada:radajaxpanel>

Workaround for RadGrid

We use the same technique as in the previous workaround. Since the button which should initiate a postback is in a template, you cannot use its UniqueID directly, so we will check for its ID. Please, ensure that you have no other buttons with the same ID on your page.

Note: UpdateButton and PerformInsertButton are the IDs of the integrated in RadGrid Update and Insert buttons. If you have custom edit form with buttons with different IDs, you should use their IDs instead.

<script type="text/javascript">
//on insert and update buttons click temporarily disables ajax to perform upload actions
function conditionalPostback(e, sender)
{
  var re = new RegExp("\.UpdateButton$|\.PerformInsertButton$", "ig");
  if (sender.EventTarget.match(re))
  {
    sender.EnableAjax = false;
  }
}

</script>
<rad:radprogressmanager id="RadProgressManager1" runat="server"/>
<radg:radgrid runat="server" id="RadGrid1" enableajax="true">
  <clientsettings>
    <clientevents onrequeststart="conditionalPostback" />
  </clientsettings>
  <mastertableview>
    <columns>
      <radg:grideditcommandcolumn />
      <radg:gridtemplatecolumn uniquename="Upload">
        <itemtemplate>
           ...
        </itemtemplate>
        <edititemtemplate>
           <rad:radupload id="RadUpload1" runat="server" />
        </edititemtemplate>
      </radg:gridtemplatecolumn>
    </columns>
    <editformsettings>
      <editcolumn uniquename="EditCommandColumn1">
      </editcolumn>
    </editformsettings>
  </mastertableview>
</radg:radgrid>

Alternative workaround for both RadAjaxPanel and RadGrid

RadAjax automatically replaces all instances of "__doPostBack" inside the AJAX-enabled controls, such as those which are placed inside RadAjaxPanel. If you create a javascript function which calls __doPostBack in its body and call it instead of __doPostBack, you will be able to perform postbacks from AJAX-enabled controls.

Note: If you place the realPostBack function in an user control, make sure that it is not placed inside RadAjaxPanel or RadGrid, because they will automatically replace the call to __doPostBack in the realPostBack function body. In this case you will need to declare the realPostBack function in the ASPX page.

ASPX/ASCX

<script type="text/javascript">
function realPostBack(eventTarget, eventArgument)
{
   __doPostBack(eventTarget, eventArgument);
}
</script>
<rada:radajaxpanel runat="server" id="RadAjaxPanel1">

  <asp:button runat="server" id="ButtonSubmit" text="Upload" />
  <rad:radupload runat="server" id="RadUpload1" />
</rada:radajaxpanel>

C#

protected void Page_Load(object sender, EventArgs e)
{
  if
(!IsPostback)
  {
    GetPostBackEventReference(this);
    ButtonSubmit.Attributes.Add("onclick",
      string.Format("realPostBack('{0}', ''); return false;", ButtonSubmit.UniqueID));
  }
}

VB.NET

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
  If
Not IsPostBack Then
    GetPostBackEventReference(Me)
    ButtonSubmit.Attributes.Add("onclick", _
        String.Format("realPostBack('{0}', ''); return false;", ButtonSubmit.UniqueID))
  End If
End Sub