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

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

8 Answers 48 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Michael asked on 06 Jan 2014, 08:24 PM
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" />
          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" />
          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" />
          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" />
          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>

8 Answers, 1 is accepted

Sort by
Telerik team
answered on 08 Jan 2014, 03:29 PM

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.
Justin Maslow
Top achievements
Rank 1
answered on 07 Jan 2015, 04:51 PM
The problem does exist, and it's been a year since this has been reported. Please test thoroughly before you release it. Thank you.
Aneliya Petkova
Telerik team
answered on 08 Jan 2015, 09:24 AM

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.

Top achievements
Rank 1
answered on 08 Jan 2015, 12:13 PM
This problem is replicable ad nauseum when using the ASP.NET development server.
Aneliya Petkova
Telerik team
answered on 09 Jan 2015, 02:49 PM
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.

David Apelt
Top achievements
Rank 1
answered on 21 Jul 2015, 12:01 AM
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.
Top achievements
Rank 1
answered on 21 Jul 2015, 09:41 AM
That makes perfect sense.  I was running VS in admin mode.  Well done.
Aneliya Petkova
Telerik team
answered on 23 Jul 2015, 12:21 PM
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
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Justin Maslow
Top achievements
Rank 1
Aneliya Petkova
Telerik team
Top achievements
Rank 1
David Apelt
Top achievements
Rank 1
Share this question