Follow-Up to Drag n Drop work work.. works in second browser

9 posts, 0 answers
  1. Michael
    Michael avatar
    5 posts
    Member since:
    Feb 2012

    Posted 06 Jan 2014 Link to this post

    Follow up to other post
    Drag and drop wont' work on one of two web applications using same page

    Turns out that the AsyncFileUpload Drag and Drop feature does not work in the first browser the page opens in but it does work in each subsequent browser.  It doesn't matter whether Firefox, Internet Explorer, or Chrome is opened first, the control does not work as expected, however when you copy and past the url to the webform in the other two browsers the AsyncFileUpload Control works as expected.

    See attached images which show that all three browsers are running the exact same page!!
    It doesn't matter which browser you choose to run the application in first; IE10, Chrome, or Firefox the AsyncFileUpload Control Drag and Drop feature does not work.  Another odd behavior is that the file select control does not show any mapped network drives to choose files from.  You can choose files from the Network neighborhood but the mapped drives do not show-up.

    The second and third browsers (doesn't matter which you choose, IE, Chrome, or Firefox) the control works as expected. I'm using the ASP.NET development server rather than IIS.  This is on the .NET 4.0 framework.  Again, here are the relevant webconfig, markup, and code-behind files.

    Any help is much appreciated. Mark-up of aspx page.
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="RadUpload.aspx.vb" Inherits="AgencyHome.UI.RadUpload" %>
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <head runat="server">
        <script src="" type="text/javascript"></script>
        <link href="/App_Themes/Upload/AsyncUpload.Metro.css" rel="Stylesheet" type="text/css" />
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            <table style="font-family: Arial, Helvetica, sans-serif;" cellpadding="10">
                        <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" AllowedFileExtensions="jpg,png,pdf,xls,xlsx,doc,docx" DropZones="#DropZone1,#DropZone2" >
                                <telerik:FileFilter Description="Documents" Extensions="pdf,xls,xlsx,doc,docx,jpg,png" />
                        <div id="DropZone1">
                            <p>Send to ASUREA</p>
                            <p>Drop Applications Here</p>
                    <asp:Panel ID="DropZone2" runat="server">
                        <p>Using Panel</p>
                        <p>Drop Files Here</p>
                         <asp:Button ID="uploadButton" runat="server" Text="Upload" />
        <script type="text/javascript">
            var $ = $telerik.$;
            function pageLoad() {
                if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
                    $(".qsf-demo-canvas").html("<strong>Your browser does not support Drag and Drop. Please take a look at the info box for additional information.</strong>");
                else {
                    $(document).bind({ "drop": function (e) { e.stopPropagation(); 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 = "#357A2B";
            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 = "#000000";
            function dragLeaveHandler(e, dropZone) {
                if (!$telerik.isMouseOverElement(dropZone[0], e.originalEvent))
                    dropZone[0].style.backgroundColor = "#357A2B";
    #Region "Imports statements"
    Option Strict On
    Imports System
    Imports System.Data
    Imports System.Collections
    Imports System.Collections.Generic
    Imports System.ComponentModel
    Imports System.Web.UI
    Imports System.Web.UI.WebControls
    Imports BaseClasses
    Imports BaseClasses.Utils
    Imports BaseClasses.Utils.StringUtils
    Imports BaseClasses.Data
    Imports BaseClasses.Data.SqlProvider
    Imports BaseClasses.Data.OrderByItem.OrderDir
    Imports BaseClasses.Data.BaseFilter
    Imports BaseClasses.Data.BaseFilter.ComparisonOperator
    Imports BaseClasses.Web.UI.WebControls
    Imports AgencyHome.Business
    Imports AgencyHome.Data
    Imports Telerik
    Imports Telerik.Web.UI
    #End Region
    Namespace AgencyHome.UI
        Public Class RadUpload
            Inherits System.Web.UI.Page
            '        Public WithEvents RadAsyncUpload1 As Telerik.Web.UI.RadAsyncUpload
            '        Public WithEvents uploadButton As System.Web.UI.WebControls.Button
            Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            End Sub
            Protected Sub uploadButton_Click(sender As Object, e As EventArgs) Handles uploadButton.Click
                'If RadAsyncUpload1.UploadedFiles.Count > 0 Then
                'End If
            End Sub
            Protected Sub RadAsyncUpload1_FileUploaded(sender As Object, e As Telerik.Web.UI.FileUploadedEventArgs) Handles RadAsyncUpload1.FileUploaded
                MsgBox("File Uploaded and named " + e.File.FileName + " Also known as " + e.File.GetName() + " And is this long " + e.File.ContentLength.ToString)
            End Sub
            Protected Sub RadAsyncUpload1_PreRender(sender As Object, e As EventArgs) Handles RadAsyncUpload1.PreRender
                Me.RadAsyncUpload1.AllowedFileExtensions = "jpg,png,pdf,xls,xlsx,doc,docx,tif,tiff,xps".Split(CChar(","))
                Me.RadAsyncUpload1.MaxFileSize = 20971520
                Me.RadAsyncUpload1.InputSize = 50
                Me.RadAsyncUpload1.EnableEmbeddedSkins = False
                Me.RadAsyncUpload1.Skin = ""
                Me.RadAsyncUpload1.HideFileInput = True
                Me.RadAsyncUpload1.MultipleFileSelection = AsyncUpload.MultipleFileSelection.Automatic
                Me.RadAsyncUpload1.TargetFolder = "~/Documents/Permanent"
                Me.RadAsyncUpload1.TemporaryFolder = "~/Documents/Temp"
            End Sub
        End Class
    End Namespace

    <?xml version="1.0"?>
          You should edit the copy of this Web.config file in the [application name] directory.
        <section name="DataAccessLayerWhereClause" type="BaseClasses" allowLocation="true" allowDefinition="Everywhere" />
        <add name="DatabaseAgentCenter" connectionString="Data Source=IWI01AS14;Database=AgentCenter;Trusted_Connection=yes;User Id=INSWHL\AgencyWorksDW;Password=p@ssw0rd"
          providerName="System.Data.SqlClient" />
        <add name="DatabaseASUREALeads" connectionString="Data Source=CORELLIA;Database=ASUREALeads;Trusted_Connection=yes;User Id=INSWHL\mhansen;Password=winter9529"
          providerName="System.Data.SqlClient" />
          <smtp from="">
            <network host="ASUREAEX01" port="25" userName="mhansen" password="winter9529" defaultCredentials="false" />
        <!--  EVENT LOGGING
              Set LogEvents value="false" to disable all logging to the system event log.
              Set LogDatabaseCommands value="true" to log all database SQL commands to the
              system the event log. Only works if LogEvents = "true".
              Set LogDatabaseExceptions value="all" to log all database exceptions to the
              system the event log.  Set to "default" to only log exceptions that are unlikely
              to be caused by normal user interaction.  Only works if LogEvents = "true"
              Set LogCommitExceptions value="all" to log all database transaction commit exceptions
              to the system the event log.  Set to "default" to only log exceptions that are unlikely
              to be caused by normal user interaction.  Only works if LogEvents = "true".
              To get detailed page-level tracing, set the following to "true":
                  TraceDatabaseCommands, TraceDataAccessMethods, TraceTransactionCache
              Also set trace enabled="true" and pageOutput="true" in the
              APPLICATION-LEVEL TRACE LOGGING section below.
           The ViewStateLocation specifies where the view state for a page
           should be stored. 
           1. Page (default): Stored it in the page.  Increases page size.
              Always works, but slower to encrypt, decrypt and send.
           2. Session: Store it in the session on the server.
              Results in better performance, but may not always work because
              session data may be timed out, or flushed to make room for more.
           3. Cache: Stored in the cache.  Similar to Session, but has more
              timeout options.
           4. File: Stored in a temporary file.  Will always work, but slower.
           5. Database: Stored in the database.  Will always work, but slower.
           See online help for more information.
        <add key="LogEvents" value="false" />
        <add key="SPHost" value="http://spdev2010:3333/AppProc/" />
        <add key="NewBusList" value="Submission Documents" />
        <add key="SPNewBusListEmail" value="" />
        <add key="LogDatabaseCommands" value="false" />
        <add key="LogDatabaseExceptions" value="default" />
        <add key="LogCommitExceptions" value="default" />
        <add key="TraceDatabaseCommands" value="false" />
        <add key="TraceDataAccessMethods" value="false" />
        <add key="TraceTransactionCache" value="false" />
        <add key="WebServer" value="http://localhost" />
        <add key="ApplicationName" value="AgencyHome" />
        <add key="FCKeditor:BasePath" value="~/FCKeditor/" />
        <add key="AuthenticationType" value="None" />
        <add key="RoleManagement" value="None" />
        <add key="CookieEncryptionKey" value="{DE98517F-CC5F-4E78-BD61-A477E237B740}" />
        <add key="URLEncryptionKey" value="{DE98517F-CC5F-4E78-BD61-A477E237B740}" />
        <add key="ChartImageHandler" value="Storage=file;Timeout=20;Url=../Temp/;" />
        <add key="GoogleSignature" value="" />
        <add key="SecurityDisabled" value="False" />
        <add key="GoogleKey" value="" />
        <add key="GoogleClientID" value="" />
        <add key="DefaultDistanceUnit" value="miles" />
        <add key="DefaultLatitude" value="37.0902400" />
        <add key="DefaultLongitude" value="-95.7128910" />
        <add key="MobileUserAgents" value="android|iphone|ipod|iemobile|windows ce|windows mobile|windows phone os|blackberry|palm|skyfire|symbian|symbos" />
        <add key="aspnet:MaxHttpCollectionKeys" value="2000" />
        <add key="aspnet:MaxJsonDeserializerMembers" value="2000" />
        <add key="ViewStateLocation" value="Session" />
        <add key="MobileDefaultPageUrl" value="" />
        <add key="DefaultPageUrl" value="SUBMITBUS/Show-SUBMITBUS-Table.aspx" />
        <compilation debug="true" targetFramework="4.0" optimizeCompilations="true" tempDirectory="A:\ASP_NET_TempFiles\">
            <add assembly="System.Data.OracleClient, Version=, Culture=neutral, PublicKeyToken=B77A5C561934E089" />
            <add assembly="System.Web.DataVisualization, Version=, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
     <!--       <add assembly="System.Windows.Forms, Version=, Culture=neutral, PublicKeyToken=B77A5C561934E089" /> -->
            <add assembly="System.Design, Version=, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A" />
            <add assembly="System.Windows.Forms, Version=, Culture=neutral, PublicKeyToken=B77A5C561934E089" />
            <add assembly="System.Speech, Version=, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
            <remove extension=".lic" />
            <add extension=".lic" type="System.Web.Compilation.ForceCopyBuildProvider" />
        <roleManager enabled="false" cacheRolesInCookie="false" defaultProvider="AspNetSqlRoleProvider" />
        <siteMap defaultProvider="MenuElementsProvider">
            <add siteMapFile="~/Menu Panels/Menu.sitemap" securityTrimmingEnabled="true" name="MenuElementsProvider" type="AgencyHome.UI.MenuXmlSiteMapProvider" />
            <add siteMapFile="~/Menu Panels/MenuMobile.sitemap" securityTrimmingEnabled="true" name="MenuMobileElementsProvider" type="AgencyHome.UI.MenuXmlSiteMapProvider" />
    <!--      <add path="ScriptResource.axd" verb="GET,HEAD" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false" /> -->
          <add path="Telerik.Web.UI.WebResource.axd" verb="*" type="Telerik.Web.UI.WebResource, Telerik.Web.UI, Culture=neutral, PublicKeyToken=121fae78165ba3d4" validate="false" />
          <add path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" verb="*" validate="false" />     
          <add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false" />
          <add name="RadUploadModule" type="Telerik.Web.UI.RadUploadHttpModule" />
        <!-- ASMX is mapped to a new handler so that proxy JavaScripts can also be served. -->
        <pages validateRequest="false" controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID" theme="Zinfandel">
            <clear />
            <add namespace="AgencyHome" />
            <add namespace="AgencyHome.UI" />
            <add namespace="AgencyHome.UI.Controls" />
            <add namespace="AgencyHome.Data" />
            <add namespace="AgencyHome.Business" />
            <add namespace="System" />
            <add namespace="System.Collections" />
            <add namespace="System.Collections.Specialized" />
            <add namespace="System.Configuration" />
            <add namespace="System.Text" />
            <add namespace="System.Text.RegularExpressions" />
            <add namespace="System.Web" />
            <add namespace="System.Web.Caching" />
            <add namespace="System.Web.SessionState" />
            <add namespace="System.Web.Security" />
            <add namespace="System.Web.Profile" />
            <add namespace="System.Web.UI" />
            <add namespace="System.Web.UI.WebControls" />
            <add namespace="System.Web.UI.WebControls.WebParts" />
            <add namespace="System.Web.UI.HtmlControls" />
            <add namespace="BaseClasses" />
            <add namespace="BaseClasses.Web.UI.WebControls" />
            <add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
              Set customErrors mode="On" or "RemoteOnly" to enable custom error messages, "Off" to disable.
              Add <error> tags for each of the errors you want to handle.
        <customErrors mode="RemoteOnly" defaultRedirect="Shared/Internal_Server_Error.html">
          <error statusCode="404" redirect="Shared/Internal_Server_Error.html" />
          <error statusCode="500" redirect="Shared/Internal_Server_Error.html" />
        <!--  AUTHENTICATION
              This section sets the authentication policies of the application. Possible modes are "Windows",
              "Forms", "Passport" and "None"
        <authentication mode="Windows" />
        <!--  IDENTITY
              Set Impersonate="true" to enable IIS to run this application under the credentials of the current user.
            Set Impersonate="false" to enable Active Directory single sign-in. Note: "false" disables Active Directory authentication for localhost.
        <identity impersonate="true" password="winter9529" userName="INSWHL\mhansen" />
        <!--  AUTHORIZATION
              This section sets the authorization policies of the application. You can allow or deny access
              to application resources by user or role. Wildcards: "*" mean everyone, "?" means anonymous
              (unauthenticated) users.
          <allow users="*" />
          <!-- Allow all users -->
          <!--  <allow     users="[comma separated list of users]"
                                 roles="[comma separated list of roles]"/>
                      <deny      users="[comma separated list of users]"
                                 roles="[comma separated list of roles]"/>
              Application-level tracing enables trace log output for every page within an application. Set trace enabled="true" to enable application trace logging.  If pageOutput="true", the
              trace information will be displayed at the bottom of each page.  Otherwise, you can view the application trace log by browsing the "trace.axd" page from your web application root.
        <trace enabled="false" requestLimit="10" pageOutput="false" traceMode="SortByTime" localOnly="true" />
              By default ASP.NET uses cookies to identify which requests belong to a particular session. If cookies are not available, a session can be tracked by adding a session identifier to the URL.
              To disable cookies, set sessionState cookieless="true".
        <sessionState mode="InProc" stateConnectionString="tcpip=" sqlConnectionString="data source=;user id=sa;password=" cookieless="false" timeout="60" />
        <!--  GLOBALIZATION
              This section sets the globalization settings of the application.
              Set responseEncoding to an appropriate value to ensure emails sent from your application are correctly encoded and display your language’s complete character set.  For example, if your default language is French and you want
              French characters from the extended French character set to be correctly included and displayed in your emails, may set responseEncoding to “windows-1252”.  Remove the responseEncoding parameter to use the setting in your
              machine.config file or to use the encoding defaults in your computer's Regional Options locale setting.
        <globalization fileEncoding="utf-8" requestEncoding="utf-8" responseEncoding="utf-8" culture="en-US" uiCulture="en-US" />
        <!--  HTTP RUN TIME This section sets the run time settings of the application.
     <httpRuntime maxRequestLength="10240" requestValidationMode="2.0" />
      <location path="DefaultWsdlHelpGenerator.aspx">
          <pages styleSheetTheme="" />
        <validation validateIntegratedModeConfiguration="false" />
        <modules runAllManagedModulesForAllRequests="true">
          <add name="RadUploadModule" preCondition="integratedMode" type="Telerik.Web.UI.RadUploadHttpModule" />
          <add name="Telerik_Web_UI_WebResource_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" />
          <add name="Telerik_RadUploadProgressHandler_ashx" verb="*" preCondition="integratedMode" path="Telerik.RadUploadProgressHandler.ashx" type="Telerik.Web.UI.RadUploadProgressHandler" />     
          <remove name="ChartImageHandler" />
          <add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD,POST" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
      <!-- Following Section is used for data access layer where clauses and formulas
           Please modify this section using Batch Meister Wizard instead of directly
           making changes here.
          <WhereClause Apply="false">
          <WhereClause Apply="false">
          <Formula Apply="false">
            <Event>Initialize when inserting</Event>
          <Formula Apply="false">
            <Value>If(BirthDate > Today() , "Birthdate cannot be in the future" , "")</Value>
            <Event>Validate when inserting</Event>
          <Formula Apply="false">
            <Event>Initialize when updating</Event>
          <Formula Apply="false">
            <Event>Initialize when inserting</Event>
          <Formula Apply="false">
            <Event>Initialize when updating</Event>

  2. Plamen
    Plamen avatar
    2724 posts

    Posted 08 Jan 2014 Link to this post


    The issue described is quite unusual indeed and we have no encountered the same before that.

    Would you please let us know if the same behavior can be replicated when you host the application on IIS too? Please let us know as well if the default upload functionality of RadAsyncUpload is working correctly when the drag and drop is failing.

    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 the blog feed now.
  3. DevCraft R3 2016 release webinar banner
  4. Justin Maslow
    Justin Maslow avatar
    15 posts
    Member since:
    Apr 2010

    Posted 07 Jan 2015 in reply to Plamen Link to this post

    The problem does exist, and it's been a year since this has been reported. Please test thoroughly before you release it. Thank you.
  5. Aneliya Petkova
    Aneliya Petkova avatar
    207 posts

    Posted 08 Jan 2015 Link to this post


    We are not aware of such a problem with the RadAsyncUpload control. I made a page using the files you sent, and tested it in Chrome, Firefox and IE11 browsers, but I was not able to reproduce the issue you are facing.
    Attached you may find the solution I used for testing. Please check it and let me know what I am missing in order to reproduce the problem. Here is a video showing the result of my test.
    Please note that it would be helpful if you send me the modified project in a support ticket.

    Aneliya Petkova

    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.

  6. Michael
    Michael avatar
    5 posts
    Member since:
    Feb 2012

    Posted 08 Jan 2015 in reply to Aneliya Petkova Link to this post

    This problem is replicable ad nauseum when using the ASP.NET development server.
  7. Aneliya Petkova
    Aneliya Petkova avatar
    207 posts

    Posted 09 Jan 2015 Link to this post

    Hi Michael,

    Yes, we tested using the ASP.NET development server, but we are not able to reproduce the issue.
    Did you try the project I sent? Please test it and let me know if I am missing something.

    Aneliya Petkova

    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.

  8. David Apelt
    David Apelt avatar
    27 posts
    Member since:
    May 2007

    Posted 20 Jul 2015 Link to this post

    I know what it is!  Run VS in administrator mode. It will then launch the browser in admin mode too.  Since there is a mismatch in elevation levels between the desktop and the browser, the drag and drop operation is not allowed.  When you launch a new browser, it is not in an elevated mode and the drag and drop works.

    So, don't run VS in admin mode if you can avoid it.
  9. Michael
    Michael avatar
    5 posts
    Member since:
    Feb 2012

    Posted 21 Jul 2015 in reply to David Apelt Link to this post

    That makes perfect sense.  I was running VS in admin mode.  Well done.
  10. Aneliya Petkova
    Aneliya Petkova avatar
    207 posts

    Posted 23 Jul 2015 Link to this post

    Hi David,

    Thank you for sharing this with the community.

    I am glad that the reason for this problem is found.

    Aneliya Petkova
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
DevCraft R3 2016 release webinar banner