Radupload with radajaxpanel

[Fabio Cirillo]

Why not work with the radupload radajaxpanel on?

[Princy]

Hi

According to this documentation 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 your application must perform a full page postback.

Following is a Workaround for using RadUpload with RadAjaxPanel.

ASPX:

<telerik:radajaxpanel runat="server" id="RadAjaxPanel1" clientevents-onrequeststart="conditionalPostback">
   <telerik:RadUpload runat="server" id="RadUpload1" />
   <asp:Button id="Button1" runat="server" text="Upload" />
</telerik:radajaxpanel>

JS:

<script type="text/javascript">
     // on upload button click temporarily disables ajax to perform
     // upload actions
     function conditionalPostback(sender, args) {
         if (args.get_eventTarget() == "<%= ButtonSubmit.UniqueID %>") {
             args.set_enableAjax(false);
         }
     }
 </script>

Hope this helps.

Regards,
Princy.

[Fabio Cirillo]

Thnks for the replay and your code its good but i've a radloadingpanel into the page and you do not see when I start the upload

this my code:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
             DefaultLoadingPanelID="RadAjaxLoadingPanel1">
         </telerik:RadAjaxManager>
         <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" height="200px" HorizontalAlign="NotSet"
                               ClientEvents-OnRequestStart="conditionalPostback" LoadingPanelID="RadAjaxLoadingPanel1" width="300px" >

etc....

[Shinu]

Hi,

Following is the sample code that I tried to show the RadAjaxLoadingPanel with the RadUpload.

ASPX:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Button1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadUpload1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
    <ClientEvents OnRequestStart="conditionalPostback" />
</telerik:RadAjaxManager>
<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" ClientEvents-OnRequestStart="conditionalPostback" LoadingPanelID="RadAjaxLoadingPanel1">
    <telerik:RadUpload runat="server" ID="RadUpload1" TargetFolder="~/" />
    <asp:Button ID="Button1" runat="server" Text="Upload" />
</telerik:RadAjaxPanel>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" BackImageUrl="~/Images/loding.gif">
</telerik:RadAjaxLoadingPanel>

JS:

<script type="text/javascript">
    function conditionalPostback(sender, args) {
        debugger;
        if (args.get_eventTarget() == "<%= Button1.UniqueID %>") {
            args.set_enableAjax(false);
            var panel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
            var divElementStyle = panel.get_element().style;
            divElementStyle.position = 'absolute';
            divElementStyle.left = args.get_eventTargetElement().offsetLeft + args.get_eventTargetElement().offsetWidth + "px";
            divElementStyle.top = args.get_eventTargetElement().offsetTop + "px";
            currentUpdatedControl = "<%= RadUpload1.ClientID %>";
            panel.show(currentUpdatedControl);
        }
    }
</script>

Hope this helps.

Regards,
Shinu.

[Fabio Cirillo]

Hi,
if use your code, when i write in html code this:

 

<ClientEvents OnRequestStart="conditionalPostback" />

visual studio tell me this error element is not supported

th eversion telerik is Q3 2012 its problem?

then the gif animator in not visible and i've another button with this code and with ajaxloadingpanel activeted the javascript code no function, why?

Protected Sub Imgbtnesci_Click(sender As Object, e As System.Web.UI.ImageClickEventArgs) Handles Imgbtnesci.Click
ClientScript.RegisterStartupScript(Me.GetType, "closeWindow", "<script type='text/javascript'>GetRadWindow().close('" & _image & "')</script>")
End Sub

[Plamen]

Hi,

 
In such cases we recommend using RadAsyncUpload control that allows uploading files when Ajax is used.

Hope this will be helpful.

Regards,
Plamen
the Telerik team

[Fabio Cirillo]

Ok, now i'm using this object, but i would to see radajaxloadingpanel and a message after upload image is the process is ok, how do it?

my code is:

<body>
    <form id="form1" runat="server">
    <telerik:RadAjaxManager runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAsyncUpload1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="form1"
                        LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI"
                Name="Telerik.Web.UI.Common.Core.js">
            </asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI"
                Name="Telerik.Web.UI.Common.jQuery.js">
            </asp:ScriptReference>
            <asp:ScriptReference Assembly="Telerik.Web.UI"
                Name="Telerik.Web.UI.Common.jQueryInclude.js">
            </asp:ScriptReference>
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"
        Skin="Default">
    </telerik:RadAjaxLoadingPanel>
    <div>

        <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" Culture="it-IT"
            Skin="Sunset" TargetFolder="public/image_profile">
        </telerik:RadAsyncUpload>

    </div>
    </form>
</body>

[Fabio Cirillo]

this my code:

<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" Culture="it-IT"
    Skin="Sunset" TargetFolder="public/image_profile">
</telerik:RadAsyncUpload>

but the file is not transferred

[Plamen]

Hello Fabio,

 
RadAsyncUpload itself is not preforming post back and if you want to use RadAjaxManager together with it you should either use AjaxRequest in this demo or submit the page with some button and ajaxify the button instead of RadAsyncUpoad.

Is for the indicator while uploading you an use the Progress manager as it is done here.

All the best,
Plamen
the Telerik team