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:
Supporting Javascript:
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
>
</
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>