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
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.
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>
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.
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.
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.
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.
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.
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.
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.
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
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.