RadUpload breaks after first upload

Thread is closed for posting
10 posts, 0 answers
  1. Jay
    Jay avatar
    87 posts
    Member since:
    Nov 2007

    Posted 30 Jun 2011 Link to this post

    I have a RadUpload control on my page, starting as not visible ("Visible=false") and displaying after an AJAX call. The first time I show it, everything works how I would expect. But, after I show it and then make a postback call, if I show it again, it doesn't look or function like the RadUpload should. It looks like the base elements for the RadUpload control, but without styling or function, although a HTML input type="file" control follows my mouse when I hover over the RadUpload area.

    The following code should demonstrate the issue:
    <%@ Page AutoEventWireup="true" Language="C#" %>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            AjaxPanel.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(AjaxPanel_AjaxRequest);
        }
     
        void AjaxPanel_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            var args = e.Argument.Split(',');
            switch (args[0].ToUpper())
            {
            case "SHOWFILE": FilePicker.Visible = true; break;
            }
        }
     
        void Upload_Click(object sender, EventArgs e)
        {
            FilePicker.Visible = false;
        }
     
        void FilePicker_Show(object sender, EventArgs e)
        {
            FilePicker.Visible = true;
        }
    </script>
     
    <head runat="server">
        <title>Test Upload</title>
    </head>
     
    <body>
    <form runat="server">
    <asp:ScriptManager runat="server" />
     
    <telerik:RadAjaxPanel ID="AjaxPanel" runat="server" EnableAJAX="true">
    <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
     
    <script language="javascript" type="text/javascript">
        function ShowFilePicker(idAjax) {
            try {
                $find(idAjax).ajaxRequest("SHOWFILE");
            } catch(e) { }
            return false;
        }
    </script>
     
    </telerik:RadScriptBlock>
     
    <asp:PlaceHolder ID="FileSection" runat="server">
        <telerik:RadUpload ID="FilePicker" runat="server" ControlObjectsVisibility="None" Visible="false" />
        <asp:Button Text="Upload" runat="server" OnClick="Upload_Click" />
    </asp:PlaceHolder>
     
    <asp:PlaceHolder runat="server">
        <a href="#" onclick='return ShowFilePicker("<%= AjaxPanel.ClientID %>");'>Show Picker</a>
    </asp:PlaceHolder>
     
    </telerik:RadAjaxPanel>
     
    </form>
    </body>
    </html>
  2. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 05 Jul 2011 Link to this post

    Hello Jay,

    From you explanation, I'm assuming it's not styling the control correctly after the second ajax request. In your AjaxPanel_AjaxRequest event, try adding this line before the break statement:

     

     

    RadStyleSheetManager.GetCurrent(Page).RegisterSkinnableControl(FilePicker)

    Hopefully, that will fix the skinning issue.

     

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jay
    Jay avatar
    87 posts
    Member since:
    Nov 2007

    Posted 05 Jul 2011 Link to this post

    I added that line in the AjaxPanel_AjaxRequest function, but it causes the FilePicker object not to show at all.
  5. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 06 Jul 2011 Link to this post

    Hello Jay,

    As you have noticed RadUpload control is using a standard input type="file" control. Unfortunately it is not possible to upload files with an ajax request when using the standard RadUpload. This is just a limitation of the XMLHttpRequest object used for performing an asynchronous requests to the server.

    Greetings,
    Peter Filipov
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Jay
    Jay avatar
    87 posts
    Member since:
    Nov 2007

    Posted 25 Jul 2011 Link to this post

    From the Reference Guide, I added a postback intercept in the RadAjaxPanel:
    <telerik:RadAjaxPanel ID="AjaxPanel" runat="server" EnableAJAX="true" ClientEvents-OnRequestStart="conditionalPostback">
    <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
     
    <script language="javascript" type="text/javascript">
        function ShowFilePicker(idAjax) {
            try {
                $find(idAjax).ajaxRequest("SHOWFILE");
            } catch(e) { alert(e); }
            return false;
        }
     
        // We have to do a full postback to support file uploads
        function conditionalPostback(sender, args) {
            if(args.get_eventTarget() == "<%= FileUpload.UniqueID %>")
                args.set_enableAjax(false);
        }
    </script>
     
    </telerik:RadScriptBlock>

    This still causes display issues with the Upload control after one postback.
  7. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 27 Jul 2011 Link to this post

    Hello Jay,

    Please review the attached project. It implements the scenario from the Reference Guide. When a button is clicked in the RadAjaxPanel an ajax postback is fired. conditionalPostback method disable the ajax postback and a normal postback is triggered.

    All the best,
    Peter Filipov
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  8. Jay
    Jay avatar
    87 posts
    Member since:
    Nov 2007

    Posted 27 Jul 2011 Link to this post

    Yes, I only provided a snippet of my code, but I've implemented the postback intercept successfully. I still have the issue with the RadUpload control not displaying properly after the postback.
    <%@ Page AutoEventWireup="true" Language="C#" %>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            AjaxPanel.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(AjaxPanel_AjaxRequest);
        }
     
        void AjaxPanel_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            switch (e.Argument.ToUpper())
            {
            case "SHOWFILE": FilePicker.Visible = true; break;
            }
        }
     
        void Upload_Click(object sender, EventArgs e)
        {
            FilePicker.Visible = false;
        }
    </script>
     
    <head runat="server">
        <title>Test Upload</title>
    </head>
     
    <body>
    <form runat="server">
    <asp:ScriptManager runat="server" />
     
    <telerik:RadAjaxPanel ID="AjaxPanel" runat="server" EnableAJAX="true" ClientEvents-OnRequestStart="conditionalPostback">
    <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
     
    <script language="javascript" type="text/javascript">
        function ShowFilePicker(idAjax) {
            try {
                $find(idAjax).ajaxRequest("SHOWFILE");
            } catch(e) { alert(e); }
            return false;
        }
     
        // We have to do a full postback to support file uploads
        function conditionalPostback(sender, args) {
            if(args.get_eventTarget() == "<%= FileUpload.UniqueID %>")
                args.set_enableAjax(false);
        }
    </script>
     
    </telerik:RadScriptBlock>
     
    <asp:PlaceHolder ID="FileSection" runat="server">
        <telerik:RadUpload ID="FilePicker" runat="server" ControlObjectsVisibility="None" Visible="false" />
        <asp:Button Text="Upload" runat="server" OnClick="Upload_Click" ID="FileUpload" />
    </asp:PlaceHolder>
     
    <asp:PlaceHolder runat="server">
        <a href="#" onclick='return ShowFilePicker("<%= AjaxPanel.ClientID %>");'>Show Picker</a>
    </asp:PlaceHolder>
     
    </telerik:RadAjaxPanel>
     
    </form>
    </body>
    </html>
  9. Jay
    Jay avatar
    87 posts
    Member since:
    Nov 2007

    Posted 27 Jul 2011 Link to this post

    To reproduce the issue, click "Show Picker", then "Upload" (no need to select a file to upload). After the postback completes, click "Show Picker" again to see the error.
  10. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 28 Jul 2011 Link to this post

    Hi Jay,

    I was able to reproduce your issue. Please add the RadStyleSheetManager on your page. Here is the sample code:

      <asp:ScriptManager ID="ScriptManager1" runat="server" />
    //add stylesheetmanager to resolve the CSS issue
            <telerik:RadStyleSheetManager runat="server">
            </telerik:RadStyleSheetManager>
     
            <telerik:RadAjaxPanel ID="AjaxPanel" runat="server" EnableAJAX="true" ClientEvents-OnRequestStart="conditionalPostback">
                <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
                    <script language="javascript" type="text/javascript">
                        function ShowFilePicker(idAjax) {
                            try {
                                $find(idAjax).ajaxRequest("SHOWFILE");
                            } catch (e) { alert(e); }
                            return false;
                        }
     
                        // We have to do a full postback to support file uploads
                        function conditionalPostback(sender, args) {
                            if (args.get_eventTarget() == "<%= FileUpload.UniqueID %>")
                                args.set_enableAjax(false);
                        }
                    </script>
                </telerik:RadScriptBlock>
                <asp:PlaceHolder ID="FileSection" runat="server">
                    <telerik:RadUpload ID="FilePicker" runat="server" ControlObjectsVisibility="None"
                        Visible="false" />
                    <asp:Button Text="Upload" runat="server"  ID="FileUpload" />
                </asp:PlaceHolder>
                <asp:PlaceHolder ID="PlaceHolder1" runat="server"><a href="#" onclick='return ShowFilePicker("<%= AjaxPanel.ClientID %>");'>
                    Show Picker</a> </asp:PlaceHolder>
            </telerik:RadAjaxPanel>


    Regards,
    Peter Filipov
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  11. Jay
    Jay avatar
    87 posts
    Member since:
    Nov 2007

    Posted 28 Jul 2011 Link to this post

    It appears adding the RadStyleSheetManager control fixed our problem. Thanks for your help!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017