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

Drag and drop works only once

4 Answers 268 Views

AsyncUpload

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

Atn asked on 31 Oct 2012, 07:04 PM

Hello,

I am using the RadAsyncUpload control to upload filesd to our website. Everything works fine except the drag and drop upload. I can manually add as many files as I want by clicking on the button, but I can only add one file trough drag and drop either trough the control itself or the drop zone. Any subsequent attempts to add a file by dropping it results in a "Uncaught TypeError: Cannot read property 'input' of undefined" in chrome or a "TypeError: p is undefined" in firebug. I tried playing with the AutoAddFileInputs parameter without success.

right now the tag looks like this :

<telerik:RadAsyncUpload runat="server" ID="rfUpload" Width="225px"



DropZones

="#DropZone" MultipleFileSelection="Automatic" AutoAddFileInputs="true"



OnClientAdded

="fiad" OnClientFileUploadRemoved="fiad" OnClientFileUploaded="fiup"
UploadedFilesRendering="BelowFileInput" />

and I can drag and drop several files at once but not one after the other.

I use Visual Studio 2012, RadControls Q3 2012, Windows 8 and .net framework 4.0 and we mainly use VB ( a C# solution would be fine since I'm fluent in both)

4 Answers, 1 is accepted

answered on 01 Nov 2012, 02:34 PM

I also was unable to reproduce the issue using the online demos, however, here's a screencast i made reproducing it. Here's the markup I used followed by the code behind (it didn't include the events since they're not needed to reproduce the issue)

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="CentralCollab.test" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>

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

<script type="text/javascript" language="javascript">

function fiad(y, z) {

$('td[name="trBtnUpl"]').hide()

}

function fiup(y, z) {

$('td[name="trBtnUpl"]').show()

}

</script>

</head>

<body>

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

<asp:ScriptManager ID="asm" runat="server" EnableScriptGlobalization="true" ScriptMode="Debug" EnableScriptLocalization="true" EnablePartialRendering="true" />

<div>

<table>

<tr>

<td>

<div id="DropZone" class="DropZone ui-corner-all" style="background-color:aliceblue; width: 225px; height: 161px; display: block; z-index: 10000;">

</div>

<br />

<telerik:RadAsyncUpload runat="server" ID="rfUpload" Width="225px" DropZones="#DropZone" MultipleFileSelection="Automatic" AutoAddFileInputs="true"

OnClientAdded="fiad" OnClientFileUploadRemoved="fiad" OnClientFileUploaded="fiup" UploadedFilesRendering="BelowFileInput" />

</td>

</tr>

<tr>

<td style="display: none;" name="trBtnUpl">

<asp:Button ID="btnUpload" runat="server" Text="Upload" CssClass="active" />

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Public Class test

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

End Sub

End Class

Accepted

answered on 02 Nov 2012, 12:50 PM

Hello Ant,

I tested the provided code and reproduced the problem. The issue is resolved and the fix will be available in the next internal build. In order to avoid the javascript exception please set UploadedFilesRendering to "AboveFileInput".
In a way of gratitude for pointing this out I updated your telerik points.

Regards,
Peter Filipov
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.