Multiple File Upload issues (Chrome, FF)

[Glavin]

Background:
Recently upgraded a project that uses the AJAX toolkit to the bleeding edge version to get the radscheduler to work with resource grouping and have found that it broke the uploader that a different part of the project uses.

Currently the project is using v.2012.1.424.40

Issue:
When ever a user tries to select multiple files from the file browser, or tries to click on the select the browse button more than once per post back, anything past the first file will get stuck in Chrome and FF. It seems to work ok in IE9. Below is the tag declaration.

<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" MultipleFileSelection="Automatic" AutoAddFileInputs="true" />

Other things to note is the upload control is loaded in a fancybox window. It worked before the upgrade without issue, but might be causing an issue now with the newer control version.

I'm thinking its something to do with the File API not playing nice.

[Bozhidar]

Hello Michael,

Could you please open a support ticket about this issue and attach a runnable sample project, so that we can investigate the issue locally.
 
All the best,
Bozhidar
the Telerik team

[Glavin]

ticket submitted.

I don't suppose there is a way to have it disable the file api mode, and force the flash/silverlight control?

[Bozhidar]

Hi Michael,

You can disable the FileApi module with the following javascript statement:

Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable = function () { return false; }

However this is not advised, as the FileApi is the recommended module for uploading files and provides the richest functionality. Once the bug that caused the issue mentioned earlier in this post is fixed (the fix will be included in next week's internal build) there will be no reason to disable FileApi.
 
Greetings,
Bozhidar
the Telerik team

[Curtis]

I cannot get the multiple file upload to work in Chrome. I am using Version 23.0.1271.95.

Even your demo page does not work correctly. It just hangs on the first file and never goes past that. I only selected images that were all around 150kb in size.

What is the issue and when can we expect this to be fixed?

[Bozhidar]

Hello Curtis,

To enable multiple file upload in RadAsyncUpload, you have to set the MultipleFileSelection property to "Automatic". Also, not all the demo pages of RadAsyncUpload are configured to allow multiple file uploads, and since you didn't specify which one you tested, I cannot confirm that there is an issue.

I've also attached a video capture demonstrating multiple file uploads on our demo page, using the current version of Chrome.
 
Regards,
Bozhidar
the Telerik team

[Curtis]

Hello Bozhidar,

Of course I have the MultipleFileSelection set to "Automatic" or it wouldn't work in any browser. I specifically said it would not work in Chrome but works fine in Firefox and IE. I am using Chrome Version 23.0.1271.95.

Additionally, you only have one page in your demos that shows MultipleFileSelection so you could safely assume I was trying that page, right? Here's the link to your demo:

http://demos.telerik.com/aspnet-ajax/asyncupload/examples/multiplefileselection/defaultcs.aspx

On your own demo, in Chrome's Javascript Console I get this error after I select 5 files and the upload should start. The files appear in the queue above the select box but no transferring ever takes place:

Uncaught Error while uploading, HTTP Error code is: 0
Telerik.Web.UI.WebResource.axd:11291
http://demos.telerik.com/aspnet-ajax/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_QsfScriptManager_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d4.0.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3a89093640-ae6b-44c3-b8ea-010c934f8924%3aea597d4b%3ab25378d2%3bTelerik.Web.UI%3aen-US%3af18b91a4-0e6c-41d1-af11-dfb338738b79%3a16e4e7cd%3af7645509%3a86526ba7%3a874f8ea2%3aa1a4383a%3a24ee1bba%3a1e771326%3a78b9daca%3a7165f74%3af46195d3%3a2003d0b8%3ae524c98b%3a628ebdd0%3aed16cbdc%3a19620875%3a3f6e8f3f%3a68f76a79%3a52af31a4%3a2a2fc429%3ae330518b%3a8e6f0d33%3a6a6d718d%3aa7e79140

Failed to load resource
http://demos.telerik.com/aspnet-ajax/Telerik.Web.UI.WebResource.axd?type=rau

[Bozhidar]

Hello Curtis,

This is an odd problem indeed. Perhaps it's caused by some extension of Chrome, as described in the following topic:
http://stackoverflow.com/questions/4390134/failed-to-load-resource-under-chrome

Could you try the approach suggested there (running Chrome in incognito mode), or perhaps trying it on another computer, and see if the issue persists.
 
All the best,
Bozhidar
the Telerik team

[Curtis]

Hello Bozhidar,

I tried what you suggested and unfortunately it didn't work. Even in Incognito mode, I received the same error and message. This is line 11291 from the Chrome Javascript Console:

},get_loadedModuleName:function(){return f.get_loadedModuleName();

},get_row:function(){return j;

}};

return new k();

})(),h=this.get_events().getHandler("fileUploadFailed");

if(h){h(this,g);

}var i=g.get_handled();

if(!i){throw"Error while uploading, "+e;

Uncaught Error while uploading, HTTP Error code is: 0

a("object",j).remove();

I then went in and manually disabled my extensions (only had 2 - DivX player and Logitech SetPoint) and restarted Chrome, checked to ensure they were still disabled, tried to upload, and I received the same error message.

This is what I see as red in the Network tab of Chrome's Developer tools after I do an upload:

Telerik.Web.UI.WebResource.axd
/aspnet-ajax
POST
(failed)
Pending
Telerik.Web.UI.WebResource.axd:11755
Script
13B
0B
12ms
0.0 day

Line 11755 of Telerik.Web.UI.WebResource.axd is:

if(this.isLastChunk&&m){h.open("POST",this.moduleContext.upload.handlerUrl+m);

}else{h.open("POST",this.moduleContext.upload.handlerUrl);

}h.setRequestHeader("Cache-Control","no-cache");

h.send(this.formData);

},abort:function(){this.xhr.abort();

}};

return g;

})();

I looked through my Chrome settings to see if there was anything else and nothing jumped out at me. My Chrome is completely clean as I only open it to test websites across browsers. Firefox is my standard daily use browser.

Again, doing this works for me:

Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable = function () { return false; }

But that will disable that for all our clients and that isn't acceptable as most are not having issues, especially none in other browsers.

Let me know what else I can try or other information that will help you.

Thanks,
Curtis

[Genady Sergeev]

Hello Michael,

We need a bit more information in order to troubleshoot the issue. Could you please:

1) Add event handler for the OnClientFileUploadFailed event. Once there, please alert args.get_message(). This will return the error message and might give us a hint on what is going wrong.

2) The next step is to record a fiddler log when uploading a file (and it fails). You can use fiddler cap in order to capture the log.

3) I am attaching a super simple project that basically features one async upload on a form. Can you confirm that it works on your side?

Kind regards,
Genady Sergeev
the Telerik team