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

AsyncUpload fails to process selected files with JS error.

2 Answers 72 Views

AsyncUpload

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

Ken Hawley asked on 11 May 2013, 06:56 PM

RadAsyncUploadFailure-KenHawley.png

RadAsyncUpload-Telerik.PNG

My app was working correctly with a "select" box (drag and drop did not work) under 2010.2.713.35.
Today I upgraded to 2013.1.417.40 (to see if I could get the drag and drop to work) and it quit working altogether.

As a test, I copied the demo app from this page ...
http://demos.telerik.com/aspnet-ajax/asyncupload/examples/draganddrop/defaultcs.aspx
and discovered that if fails in the same way.

When I run the Google developer tools on your demo page, it works correctly of course.
When I run the Google developer tools on my copy of your demo page, it fails when attempting to take the selected files and create/update the displayed list.
See the attached screen shot for the point of failure.
It is able to find the div.ruDropZone that it wants to manipulate, but the _proto_ for that element does not have an addBack() method that your axd expects.
Presumably, some other piece of your code has extended those elements with those methods.

Does your script manager do that? If so, you should explain that in the documentation ... that RadAsyncUpload requires the RadScriptManager.

Please advise.

Markup in my page:

<td>

<asp:updatepanel id="upUpload" runat="server" updatemode="Always" >

<contenttemplate>

<div class="RoundAll" id="DropZone2" style=

"height: 150px; width: 320px; background-color: ghostwhite; border: 1px dashed Navy; text-align: center; padding-left: 20px; padding-right: 20px; vertical-align: top; display:inline-block;"

>

<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload2" MultipleFileSelection="Automatic" DropZones=".DropZone1,#DropZone2"/>

<div class="DropZone1">

<p>Custom Drop Zone</p>

<p>Drop Files Here</p>

</div>

<div id="Div3">

<p>Custom Drop Zone</p>

<p>Drop Files Here</p>

</div>

</contenttemplate>

</asp:updatepanel>

</td>

Supporting Javascript:

<script language="javascript" type="text/javascript">

var $ = $telerik.$;

function pageLoad() {

$(document).bind({ "drop": function (e) { e.preventDefault(); } });

var dropZone1 = $(document).find(".DropZone1");

dropZone1.bind({ "dragenter": function (e) { dragEnterHandler(e, dropZone1); } })

.bind({ "dragleave": function (e) { dragLeaveHandler(e, dropZone1); } })

.bind({ "drop": function (e) { dropHandler(e, dropZone1); } });

var dropZone2 = $(document).find("#DropZone2");

dropZone2.bind({ "dragenter": function (e) { dragEnterHandler(e, dropZone2); } })

.bind({ "dragleave": function (e) { dragLeaveHandler(e, dropZone2); } })

.bind({ "drop": function (e) { dropHandler(e, dropZone2); } });

}

function dropHandler(e, dropZone) {

dropZone[0].style.backgroundColor = "Red";

}

function dragEnterHandler(e, dropZone) {

var dt = e.originalEvent.dataTransfer;

var isFile = (dt.types != null && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('application/x-moz-file')));

if (isFile || $telerik.isSafari5 || $telerik.isIE10Mode || $telerik.isOpera)

dropZone[0].style.backgroundColor = "White";

}

function dragLeaveHandler(e, dropZone) {

if (!$telerik.isMouseOverElement(dropZone[0], e.originalEvent))

dropZone[0].style.backgroundColor = "Green";

}

</script>

2 Answers, 1 is accepted

answered on 13 May 2013, 07:52 PM

The solution to this one turns out to be pretty simple.

The addBack() method is brand new in jQuery 1.8. We are still running with jQuery 1.7.1 and it was not found.

You might wonder how that is possible. It's simple really. For reasons of our own, we intercept Telerik's calls to load its embedded versions of jQuery and substitute our own. This gives us a consistent jQuery base, but it also, sadly, leads to this sort of problem.

You can be assured that we will pay careful attention in the future to the jQuery version that Telerik expects.