Dedicated Upload button

Thread is closed for posting
8 posts, 0 answers
  1. Simon
    Simon avatar
    7 posts
    Member since:
    Jun 2010

    Posted 21 Jun 2010 Link to this post

    Hello,

    I am working with the 2008 Q2 version of the Rad Controls and try to fix the problem, that only one special button starting the progress manager and therefore the update.
    I have different other buttons on my page, doing a full postback. When I press any of them the progressmanager starts. I tried your solution at http://www.telerik.com/community/forums/aspnet-ajax/upload/create-a-dedicated-submit-button-for-rad-upload.aspx
    but it does not work. So I checked the __EVENTARGUMENT so that only the link button is allowed. But even with setting the input boxes to cleared, It does not work. The progressmanager still starts.

    function startUploadSubmit(sender, args, uploadID, labelID) { 
                var upload = $find(uploadID); 
                 
                 
                //make sure, that there will be no problem 
                var eventTarget = document.getElementById('__EVENTTARGET'); 
                if (eventTarget.value == '<%= btnUploadFile.UniqueID %>') { }  
                else { 
                    var fileInputs = upload.getFileInputs(); 
                    for (var i = 0; i < fileInputs.length; i++) { 
                        upload.clearFileInputAt(i); 
                    } 
                    return; 
                }  
                                     
                var lblMessageElement = $get(labelID); 
                //is a file selected 
                var files = upload.getFileInputs(); 
                if (files[0].files.length == 0) { 
                    args.set_cancel(true); 
                    lblMessageElement.innerHTML = '<%= Encoda.Web.Settings.GetLocalizedString("Dialog#NoFileSelected") %>'
                    return; 
                } 
                var valid = upload.validateExtensions(); 
                if (!valid) { 
                    args.set_cancel(true); 
                    lblMessageElement.innerHTML = '<%= Encoda.Web.Settings.GetLocalizedString("Dialog#WrongFileExtension") %>'
                    return; WrongFileExtension 
                }            
            } 



    I even tried to set the ProgressManager to RegisterForSubmit and then calling for the onclick event of the upload button the StartProgressPolling. Trying this the progressmanager does not start at all.

    <telerik:RadScriptBlock runat="server">
           
        <script language="javascript" type="text/javascript">


    function startFileUpload() {             
                var progManager = getRadProgressManager(); 
                RadProgressManager.StartProgressPolling(); 
            }
         </script>
    </telerik:RadScriptBlock>
    <telerik:RadProgressManager ID="progressManager" runat="server" OnClientSubmitting="startUploadSubmit" RegisterForSubmit="false" />      
     
    <ucc:EncodaLinkButton Runat="server" ID="btnUploadFile" Caption="Dialog#StartUpload" OnClick="btnUploadFile_OnClick" OnClientClick="startFileUpload();" /> 


    Any ideas, how to solve the problem, that the ProgressManager (and the upload) start only pn the specified button?

  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 24 Jun 2010 Link to this post

    Hello Simon,

    Which version of the controls do you use the classic ones or the Ajax ones?

    You have chosen the right approach when trying to manually start the progoress manager on click. However, you have syntax error. This what you function looks like:

    function startFileUpload() {            
                var progManager = getRadProgressManager();
                RadProgressManager.StartProgressPolling();
     
    }

    as you see you try to use undefined object RadProgressManager.

    This is the correct function if using the classic controls:


    function startFileUpload() {           
                var progManager = GetRadProgressManager();
                progManager.StartProgressPolling();
      
    }

    When AJAX controls are used the following function should be used:

    function startFileUpload() {           
                var progManager = getRadProgressManager();
                progManager.startProgressPolling();
      
    }


    Sincerely yours,
    Genady Sergeev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Simon
    Simon avatar
    7 posts
    Member since:
    Jun 2010

    Posted 28 Jun 2010 Link to this post

    Hello Genady,

    thanks for your reply. I am using the AJAX controls.

    The progress manager starts now polling.
    But now the RadProgressArea is not updated and shown any more. When I use the RadProgressManager with RegisterForSubmit="true" (Standard behaviour) everything works fine. But with setting to false (what I want) the progress bar does not work anymore.

    Here my aspx code
    <telerik:RadProgressManager ID="progressManager" runat="server" OnClientSubmitting="startUploadSubmit" RegisterForSubmit="false" /> 
     
    <telerik:RadProgressArea ID="progressArea" runat="server" EnableEmbeddedBaseStylesheet="false"  
            ProgressIndicators="TotalProgressBar,TotalProgressPercent,TotalProgress,RequestSize,TransferSpeed,CurrentFileName" Skin="Web20" > 
        </telerik:RadProgressArea>   

    and my Javascript code:
    function startUploadSubmit(sender, args) { 
     //do something 
     ... 
    function startFileUpload() { 
                var progManager = getRadProgressManager();       
                progManager.startProgressPolling(); 
            }    

  5. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 28 Jun 2010 Link to this post

    Hi Simon,

    I am attaching sample project that shows how to start progress polling on clicking a specific button. It works fine on our side, could you please test in onto your machine?

    Kind regards,
    Genady Sergeev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Simon
    Simon avatar
    7 posts
    Member since:
    Jun 2010

    Posted 29 Jun 2010 Link to this post

    Hello Genady,

    thanks for your help.
    So your project as standalone worked very well. Then I adapted it to my project and it didn't work.
    for more detail, I will show it in the default.aspx you had and how I changed it

    the new default.aspx looks like (only form part)
    <asp:ScriptManager runat="server" ID="ScriptManagerMain"
        </asp:ScriptManager> 
         
        <script type="text/javascript"
            function startPolling() { 
                getRadProgressManager().startProgressPolling(); 
            } 
             
        </script> 
        <div>  
           <asp:UpdatePanel ID="updatePanelUpload" runat="server" UpdateMode="Conditional"
                    <ContentTemplate> 
                       <telerik:RadProgressManager runat="server" ID="RadProgressManager1"  
                            RegisterForSubmit="False" /> 
                        
                      <telerik:RadUpload ID="UploadElement" runat="server" InitialFileInputsCount="1" MaxFileInputsCount="1"  
                ControlObjectsVisibility = "None" TargetFolder="~/" MaxFileSize="5000000" EnableFileInputSkinning="false" 
                AllowedFileExtensions=".jpg,.jpeg,.gif,.png,.exe,.iso,.pdf,.zip" InputSize="50" Width="380px" EnableEmbeddedBaseStylesheet="false" />                                   
     
                       <telerik:RadProgressArea ID="progressArea" runat="server" EnableEmbeddedBaseStylesheet="false"  
                                                ProgressIndicators="TotalProgressBar,TotalProgressPercent,TotalProgress,RequestSize,TransferSpeed,CurrentFileName"  
                                                Skin="Web20" > 
                        </telerik:RadProgressArea>                                                                  
                        
                       <asp:Button runat="server" ID="Button1" Text="Text1" onclick="Button1_Click" OnClientClick="startPolling();" /> 
                   </ContentTemplate>               
            </asp:UpdatePanel> 
         
            <asp:UpdatePanel ID="UpdatePanel2" runat="server" > 
                <ContentTemplate> 
                    <asp:Button runat="server" ID="Button2" Text="Knopf2" onclick="Button2_Click"/> 
                </ContentTemplate> 
            </asp:UpdatePanel> 
             
        </div> 

    and the code behind:
    using System; 
    using System.Collections.Generic; 
     
    using System.Web; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
    using Telerik.Web.UI; 
    using System.IO; 
     
    public partial class _Default : System.Web.UI.Page  
        protected void Page_Load(object sender, EventArgs e) 
        { 
            ScriptManagerMain.RegisterPostBackControl(Button1); 
        } 
        protected void Button1_Click(object sender, EventArgs e) 
        { 
             
        } 
        protected void Button2_Click(object sender, EventArgs e) 
        { 
            updatePanelUpload.Update(); 
        } 
     

    so far so good.
    When I start the page and upload a file, everything works fine.
    But when I press the second button, to update the first update panel and afterwards try to upload a file, the progressmanager starts the upload, but no events are send to the client for showing the progressarea.

    This is what happened in my project. I had the radupload in an updatepanel, which is shown through a Ajax:ModalPopupExtender. Before showing the panel, file extensions and filesize + target folder can be set and therefore the updatepanel has to be updated.
    When I then try to start the upload the panel was already updated and will not show anymore the progressbar.

    Do you have any ideas about this problem?
    Thanks Simon


  7. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 02 Jul 2010 Link to this post

    Hello Simon,

    RadUpload and the submit button should not be inside UpdatePanel/RadAjaxPanel. 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. More information on the topic can be found here.

    As for the RadProgressArea, it really does not need to be inside UpdatePanel. RadProgressArea implements its own mechanism for asynchronous requests so that it will not cause any screen flickering while being updated.


    All the best,
    Genady Sergeev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Simon
    Simon avatar
    7 posts
    Member since:
    Jun 2010

    Posted 13 Jul 2010 Link to this post

    Hello Genady,

    yeah I understand the problem with the updatepanel. But I must have the radupload in an update panel, because I want to set the targetfolder and the filters dynamically, without a full postback. By reason the upload element and the progressbar are both in one ASP.Net control in my application, which is then in an update panel, I cannot exclude the progress bar from the update panel.
    The difficulty with the full postback, to start the radupload, is not the problem. This works. The only problem is, that the progress bar is not working anymore, after you once updated the update panel. Can you check the code I posted before, when you have the progress bar in an update panel and then update it once from outside, before starting the upload? This creates the problem.

    Greetings Simon
  9. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 16 Jul 2010 Link to this post

    Hi Simon,

    How about moving the progress area outside of the UpdatePanel? I think this would fix the problem that you experience with it, as long as the submit button performs full page postback. You can safely leave the RadUpload inside the UpdatePanel for the sake of setting the filters and the target folder.

    Sincerely yours,
    Genady Sergeev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017