This is a migrated thread and some comments may be shown as answers.

RadAsyncUpload in Firefox - Browse my computer button causes postBack

11 Answers 65 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 28 Nov 2014, 03:23 PM
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.

11 Answers, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 03 Dec 2014, 06:13 AM
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.

 
0
Peter Dzugas
Top achievements
Rank 1
answered on 05 Jan 2015, 02:53 PM
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>
0
Plamen
Telerik team
answered on 07 Jan 2015, 07:20 AM
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.

 
0
tiffany
Top achievements
Rank 1
answered on 12 Jan 2015, 08:20 PM
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.




0
Plamen
Telerik team
answered on 13 Jan 2015, 06:51 AM
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.

 
0
tiffany
Top achievements
Rank 1
answered on 13 Jan 2015, 05:20 PM
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.
0
Plamen
Telerik team
answered on 15 Jan 2015, 07:43 AM
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.

 
0
tiffany
Top achievements
Rank 1
answered on 15 Jan 2015, 07:42 PM
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.
0
Plamen
Telerik team
answered on 16 Jan 2015, 06:24 AM
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.

 
0
tiffany
Top achievements
Rank 1
answered on 16 Jan 2015, 05:20 PM
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
0
Plamen
Telerik team
answered on 21 Jan 2015, 09:57 AM
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.

 
Tags
AsyncUpload
Asked by
Peter
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Peter Dzugas
Top achievements
Rank 1
tiffany
Top achievements
Rank 1
Share this question
or