AsyncUpload fails to process selected files with JS error.

3 posts, 0 answers
  1. Ken Hawley
    Ken Hawley avatar
    8 posts
    Member since:
    Apr 2008

    Posted 11 May 2013 Link to this post

    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>
    </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. Ken Hawley
    Ken Hawley avatar
    8 posts
    Member since:
    Apr 2008

    Posted 13 May 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 16 May 2013 Link to this post

    Hello Ken,

    Thank you for sharing this solution with our community.

    Regards,
    Hristo Valyavicharski
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top