RadAsyncUpload in Firefox - Browse my computer button causes postBack

12 posts, 0 answers
  1. Peter
    Peter avatar
    1 posts
    Member since:
    Nov 2014

    Posted 28 Nov 2014 Link to this post

    Hi Everyone,

    I would like to ask if anyone can help me with this problem, since till now i wasnt able to solve it myself. Problem is with RadAsyncUpload.
    - This control is in <asp:Panel> so maybe that can cause it, maybe not.

    - This problem occures only in Firefox. In IE and Chrome, upload control is working as expected.

    - Problem definition: I click "Browse My Computer" button. Dialog will appear, then i select file and click "open". Dialog will close and nothing will happen. Nothing will start uploading, nothing will show up. There is only "Browse my computer" button and nothing is being done.

    - In Firefox when i click on "Browse my computer" button, the page goes to loadPage javascript action and i think also to postback, since i hit the debugger in my customControl.ascx.cs file, so i concluded that in FF after clicking on this button i immediately go to postback but on Chrome and IE i am not jumping into pageLoad nor to debugger in .cs file.

    - Also, in Firefox after i click open i wont jump into rauUpload_FileUploaded method. in IE and Chrome i do.

    - I checked telerik live demos and it works OK in firefox there.

    - Please note that postback happens after i click on "Browse my computer button", NOT after clicking on "open"

    The structure is like follows:

    MasterPage
    {
        page.aspx
        {  
             <asp:panel>
             customControl.ascx
             {
                 <RadAsyncUpload>
             }
             </asp:panel>
        }
    }


    UploadControl code:
    <telerik:RadAsyncUpload ID="rauUpload" runat="server" OnFileUploaded="rauUpload_FileUploaded"
        EnableInlineProgress="false" ManualUpload="false" MultipleFileSelection="Automatic"
        MaxFileInputsCount="1" HideFileInput="true" OnClientFilesUploaded="checkFiles"
        OnClientFileUploadRemoved="fileRemoved" Width="150px" OnClientFileDropped="fileRemoved">
        <Localization Select="Select" />
    </telerik:RadAsyncUpload>


    Files and Versions included from MasterPage(I write these, since it can maybe interfere with telerik asyncupload somehow. They are included in the order they are written here):
    jquery-2.1.js
    jquery-migrate-1.2.1.min.js
    jquery-ui-1.10.4.custom.min.js
    jquery.tooltipster.min.js
    select2.js
    jquery.reveal.js
    jquery.dropdown.min.js
    JEditable.js
    jquery.maskedinput.min.js
    UploadControl.js
    CommonScripts.js
    Telerik DLLs are latest version, i downloaded them yesterday - 2014.3.1024.40


    Thanks to anyone who is willing to help me with this.

  2. Plamen
    Admin
    Plamen avatar
    2733 posts

    Posted 03 Dec 2014 Link to this post

    Hello,

    We are not aware of such known issue with RadAsyncUpload. I have tested the scenario both locally and on our online demos but could not replicate it too. 

    One possible reason for it may be a javascript error so please check if you have such in the developer console or let us know.

    If you still can't find what is causing the issue please share the exact javascript used too so we could test the exact scenario and be more helpful.


    Regards,
    Plamen
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Peter Dzugas
    Peter Dzugas avatar
    2 posts
    Member since:
    Aug 2009

    Posted 05 Jan 2015 Link to this post

    Yes, we are experiencing javascript error per screenshot attached. The same page works fine in IE11.
    Our user control consist looks like below:
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AsyncUploadControl.ascx.cs"
        Inherits="ThinkSmart.EchoSign.Portal.Controls.AsyncUploadControl" %>
    <script type="text/javascript">
     
        function checkFiles(sender, args) {
            var inputs = sender.getUploadedFiles();
            var minFilesCount = $("#" + '<%= hfMinFilesCount.ClientID %>').val();
            var enableAutoPostback = $("#" + '<%= hfEnableAutoUpload.ClientID %>').val();
            if (inputs.length == 0) {
                alert("Please select a file before submitting!");
            }
            else {
                if (inputs.length >= minFilesCount) {
                    //alert("enableAutoPostback = " + enableAutoPostback);
                    if (enableAutoPostback != "false") {
                        $("#" + '<%= btnAutoPostBackUpload.ClientID %>').click();
                        $("#" + '<%= hfEnableAutoUpload.ClientID %>').val("false");
                    }
                    else {
                        __doPostBack('rauUpload_MinNumberFilesUploaded', sender.get_id());
                    }
                }
            }
        }
     
        function fileRemoved(sender, args) {
            var inputs = sender.getUploadedFiles();
            var minFilesCount = $("#" + '<%= hfMinFilesCount.ClientID %>').val();
            var enablePostback = $("#" + '<%= hfEnablePostback.ClientID%>').val();
            if (inputs.length < minFilesCount && enablePostback != "False") {
                __doPostBack('rauUpload_RemovedUnderMinNumbers', sender.get_id());
            }
        }
     
    </script>
    <asp:HiddenField ID="hfMinFilesCount" runat="server" />
    <asp:HiddenField ID="hfClearFiles" runat="server" />
    <asp:HiddenField ID="hfEnablePostback" runat="server" Value="true" />
    <asp:HiddenField ID="hfEnableAutoUpload" runat="server" Value="false" />
    <asp:Button ID="btnAutoPostBackUpload" runat="server" Style="display: none;" />
    <telerik:RadAsyncUpload ID="rauUpload" runat="server" OnFileUploaded="rauUpload_FileUploaded"
        EnableInlineProgress="false" ManualUpload="false" MultipleFileSelection="Automatic"
        MaxFileInputsCount="1" HideFileInput="true" OnClientFilesUploaded="checkFiles"
        OnClientFileUploadRemoved="fileRemoved" Width="150px" OnClientFileDropped="fileRemoved">
        <Localization Select="Select" />
    </telerik:RadAsyncUpload>
  5. Plamen
    Admin
    Plamen avatar
    2733 posts

    Posted 07 Jan 2015 Link to this post

    Hi Peter,

    I have tested the code provided with the latest version of the control and it worked correctly at my side after I added a jQuery reference. Here is a video of my test. Please review it and let me know if something else should be added or done to replicate the error.

    Regards,
    Plamen
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. tiffany
    tiffany avatar
    24 posts
    Member since:
    Jan 2014

    Posted 12 Jan 2015 in reply to Plamen Link to this post

    Hi Plamen,

    I am facing the same kind of issue.
    I have the fileuploaded event firing and can get the number of files uploaded. I am calling a jQuery button click event to move the files from the source to the destination folders. the problem is that it works fine in Chrome and IE, but on Firefox the page is posting back and I loose all the files. is there a way to suppress this in firefox?

    this is what i have in the fileUploaded event

    if (_TotalUploadedFiles == _rowNumber) {

           document.getElementById("btnDummy").click();
     }

    i dont get any javascript errors.




  7. Plamen
    Admin
    Plamen avatar
    2733 posts

    Posted 13 Jan 2015 Link to this post

    Hello,

    Would you please elaborate the issue because it is not quite clear from the code provided?

    Regards,
    Plamen
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. tiffany
    tiffany avatar
    24 posts
    Member since:
    Jan 2014

    Posted 13 Jan 2015 in reply to Plamen Link to this post

    Hi Plamen,

    I have added custom events in the RadAsyncUpload control for some validations. I have the onfileuploaded event which fires when each file is uploaded successfully. in this event I am maintaining a global array which maintains the list of files that have been uploaded. I also have a counter which I keep incrementing until all the files in the current upload list have been uploaded successfully. all this is done in Javascript. as soon as all the files are loaded i check for the count, if its the same as the total files uploaded, I trigger a postback by clicking a button using javascript. all this while the files are being uploaded in the temporary folder and when the button is clicked, the files are moved to the actual folder which is dynamically created.

    if (_TotalUploadedFiles == _rowNumber) {

           document.getElementById("btnDummy").click();
     }

    this is the function that is being called on the fileuploaded event

    function fileUploaded(sender, args) {
                                
                                var uploadedFiles = sender.getUploadedFiles();

                                if (uploadedFiles != null) {
                                    
                                    _tmpUploadList = [];
                                    for (var i = 0; i < uploadedFiles.length ; i++) {

    // just adding the filename in a global array
                                        AddToTemporaryUploadList(uploadedFiles[i]); 
                                    }

                                    $('#divStep3').show();
                                    $("#selected_files").show();
                                }

                                $('#ctl00_MainContent2_AsyncUpload1row' + _rowNumber).hide();

                                _rowNumber = _rowNumber + 1;

                                if (_TotalUploadedFiles == _rowNumber) {

    // Processing the global array.
                                    ProcessTemporaryList();

    // gets the list of files from the global array.
                                    $("#selected_files").html(GetUploadedFileListString());
                                    
    // button click event being called here.
    document.getElementById("btnDummy").click();
                                    
                                    _rowNumber = 0;
                                    _TotalUploadedFiles = 0;
                                    _success = 0;
                                    _failure = 0;
                                }
                                
                            }


    the button click event triggers a postback in firefox and the page refreshes. this does not happen in Chrome or IE.
  9. Plamen
    Admin
    Plamen avatar
    2733 posts

    Posted 15 Jan 2015 Link to this post

    Hi,

    In such cases we recommend using onclientFilesUploaded event as for example it is done in this help topic.

    Hope this will help you solve the issue.

    Regards,
    Plamen
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  10. tiffany
    tiffany avatar
    24 posts
    Member since:
    Jan 2014

    Posted 15 Jan 2015 in reply to Plamen Link to this post

    Hi Plamen,

    I am using the onClientFileUploaded event.
    here's the HTML code.

    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel">
                                                    <telerik:RadProgressArea runat="server" ID="RadProgressArea1" /> 
                                                    <telerik:RadAsyncUpload runat="server" ID="AsyncUpload1" HideFileInput="true" Skin="Office2007" OnClientValidationFailed="validationFailed"  MultipleFileSelection="Automatic" OnClientFilesSelected="filesSelected" OnClientFileUploaded="fileUploaded" ChunkSize="1048576" MaxFileInputsCount="300" AllowedFileExtensions=".pdf,.rtf,.txt,.xml,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.jpg,.bmp,.png,.tiff,.avi,.wmv" />
            
                                                </telerik:RadAjaxPanel>

    I tried adding a normal button in the RadAjaxPanel and tried clicking it, it was throwing some error in the Ajax.js file so I moved it out of the RadAjaxPanel to the asp:updatepanel and this fixed the issue.

    Hope this helps someone out there with the same issue.

    Thanks Plamen.
  11. Plamen
    Admin
    Plamen avatar
    2733 posts

    Posted 16 Jan 2015 Link to this post

    Hello,

    In such scenarios the button should also be in the Panel element so that it can correctly update the RadAsyncUpload. You can also refer to File Upload via AJAX online demo where we use ÀJAX request to achieve similar behavior

    Regards,
    Plamen
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  12. tiffany
    tiffany avatar
    24 posts
    Member since:
    Jan 2014

    Posted 16 Jan 2015 in reply to Plamen Link to this post

    Hi Plamen,

    The button is inside the panel. only thing is its the default asp.net ajax panel. if I use the RadAjaxPanel then I get a full postback on clicking the button. the same doesn't happen with the button being in the AjaxPanel. I might be missing something here. I tried opening the link you gave in Firefox and I get the same error. please see the attached file. 
    I've been getting the same error with my application
  13. Plamen
    Admin
    Plamen avatar
    2733 posts

    Posted 21 Jan 2015 Link to this post

    Hello,

    I have tested the issue on our online demos at my side in FireFox and it worked correctly once again. Here is a video of my test. Would you please review it and let me know what else should I do to observe the issue and be more helpful with a possible solution.

    Regards,
    Plamen
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017