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 169 Views

AsyncUpload

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

Michael asked on 06 Jan 2014, 08:24 PM

Chrome-FirstBrowserChosen.PNG

IE10-SecondBrowserChosen.PNG

Firefox-ThirdBrowserChosen.PNG

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

<link href="/App_Themes/Upload/AsyncUpload.Metro.css" rel="Stylesheet" type="text/css" />

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<table style="font-family: Arial, Helvetica, sans-serif;" cellpadding="10">

<tr>

<td>

<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" AllowedFileExtensions="jpg,png,pdf,xls,xlsx,doc,docx" DropZones="#DropZone1,#DropZone2" >

<FileFilters>

<telerik:FileFilter Description="Documents" Extensions="pdf,xls,xlsx,doc,docx,jpg,png" />

</FileFilters>

</telerik:RadAsyncUpload>

</td>

<td>

<div id="DropZone1">

<p>Send to ASUREA</p>

<p>Drop Applications Here</p>

</div>

</td>

<td>

<asp:Panel ID="DropZone2" runat="server">

<p>Using Panel</p>

<p>Drop Files Here</p>

</asp:Panel>

</td>

</tr>

<tr>

<td>

<asp:Button ID="uploadButton" runat="server" Text="Upload" />

</td>

</tr>

</table>

</div>

</form>

<script type="text/javascript">

//<![CDATA[

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";

}

//]]>

</script>

</body>

</html>

#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

'System.Threading.Thread.Sleep(3000)

'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

WEB.CONFIG

<?xml version="1.0"?>

<!-- EDITING THIS FILE

You should edit the copy of this Web.config file in the [application name] directory.

-->

<configuration>

<configSections>

<section name="DataAccessLayerWhereClause" type="BaseClasses" allowLocation="true" allowDefinition="Everywhere" />

</configSections>

<connectionStrings>

<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" />

</connectionStrings>

<system.net>

<mailSettings>

<smtp from="mhansen@asurea.com">

<network host="ASUREAEX01" port="25" userName="mhansen" password="winter9529" defaultCredentials="false" />

</smtp>

</mailSettings>

</system.net>

<appSettings>

<!-- EVENT LOGGING

Set LogEvents value="false" to disable all logging to the system event log.

DATABASE COMMAND LOGGING

Set LogDatabaseCommands value="true" to log all database SQL commands to the

system the event log. Only works if LogEvents = "true".

DATABASE ERROR LOGGING

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".

TRACE LOGGING OUTPUT

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.

-->

<!-- VIEWSTATE LOCATION

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="newbizsp@ASUREASPCORE01.inswhl.com" />

<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="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" />

</appSettings>

<system.web>

<compilation debug="true" targetFramework="4.0" optimizeCompilations="true" tempDirectory="A:\ASP_NET_TempFiles\">

<assemblies>

<add assembly="System.Data.OracleClient, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />

<add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

<!--       <add assembly="System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" /> -->

<add assembly="System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A" />

<add assembly="System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />

<add assembly="System.Speech, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

</assemblies>

<buildProviders>

<remove extension=".lic" />

<add extension=".lic" type="System.Web.Compilation.ForceCopyBuildProvider" />

</buildProviders>

</compilation>

<roleManager enabled="false" cacheRolesInCookie="false" defaultProvider="AspNetSqlRoleProvider" />

<siteMap defaultProvider="MenuElementsProvider">

<providers>

<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" />

</providers>

</siteMap>

<httpHandlers>

<!--      <add path="ScriptResource.axd" verb="GET,HEAD" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=4.0.0.0, 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=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

validate="false" />

</httpHandlers>

<httpModules>

<add name="RadUploadModule" type="Telerik.Web.UI.RadUploadHttpModule" />

</httpModules>

<pages validateRequest="false" controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID" theme="Zinfandel">

<namespaces>

<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" />

</namespaces>

<controls>

<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

</controls>

</pages>

<!-- CUSTOM ERROR MESSAGES

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" />

</customErrors>

<!-- 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.

-->

<authorization>

<allow 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]"/>

-->

</authorization>

<!-- APPLICATION-LEVEL TRACE LOGGING

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" />

<!-- SESSION STATE SETTINGS

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=127.1.0.1:42424" sqlConnectionString="data source=127.1.0.1;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" />

</system.web>

<location path="DefaultWsdlHelpGenerator.aspx">

<system.web>

<pages styleSheetTheme="" />

</system.web>

</location>

<system.webServer>

<validation validateIntegratedModeConfiguration="false" />

<modules runAllManagedModulesForAllRequests="true">

<add name="RadUploadModule" preCondition="integratedMode" type="Telerik.Web.UI.RadUploadHttpModule" />

</modules>

<handlers>

<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=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

/>

</handlers>

</system.webServer>

<!-- 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.

-->

<DataAccessLayerWhereClause>

<WhereClauses>

<WhereClause Apply="false">

<LHS>CompanyIDForMultiTenantApps1</LHS>

<RHS>GetColumnValue("User",UserID(),"CompanyID")</RHS>

<Operand>=</Operand>

</WhereClause>

<WhereClause Apply="false">

<LHS>CompanyIDForMultiTenantApps2</LHS>

<RHS>Session("CompanyID")</RHS>

<Operand>=</Operand>

</WhereClause>

</WhereClauses>

<Formulas>

<Formula Apply="false">

<ColumnName>CreatedBy</ColumnName>

<Value>UserID()</Value>

<Event>Initialize when inserting</Event>

</Formula>

<Formula Apply="false">

<ColumnName>BirthDate</ColumnName>

<Value>If(BirthDate > Today() , "Birthdate cannot be in the future" , "")</Value>

<Event>Validate when inserting</Event>

</Formula>

<Formula Apply="false">

<ColumnName>UpdatedOn</ColumnName>

<Value>Today()</Value>

<Event>Initialize when updating</Event>

</Formula>

<Formula Apply="false">

<ColumnName>CreatedOn</ColumnName>

<Value>Today()</Value>

<Event>Initialize when inserting</Event>

</Formula>

<Formula Apply="false">

<ColumnName>UpdatedBy</ColumnName>

<Value>UserID()</Value>

<Event>Initialize when updating</Event>

</Formula>

</Formulas>

</DataAccessLayerWhereClause>

</configuration>

8 Answers, 1 is accepted

answered on 08 Jan 2014, 03:29 PM

Hi,

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.

Regards,
Plamen
Telerik

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.

answered on 08 Jan 2015, 09:24 AM

TelerikWebSite2.zip

Hello,

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.

Regards,
Aneliya Petkova
Telerik

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.