AsycUpload using DropZone in usercontrol fires OnClientFileUploaded for each control in UI for ASP.NET AJAX

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

AsycUpload using DropZone in usercontrol fires OnClientFileUploaded for each control

4 Answers 55 Views

AsyncUpload

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

Matt asked on 15 Feb 2013, 04:46 PM

So, a bit complicated and I'm guessing there's an issue with my JavaScript so any help would be appreciated.

Here's my code:

Master Page

function pageLoad() {

if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {

$(".dropzone h5").hide();

$(".dropzone p").hide();

$(".dropzone").removeClass("dropzone");

}

else {

$(document).bind({ "drop": function (e) { e.preventDefault(); } });

$(".dropzone").each(function (index) {

$(this).bind({ "dragenter": function (e) { dragEnterHandler(e, $(this)); } })

.bind({ "dragleave": function (e) { dragLeaveHandler(e, $(this)); } })

.bind({ "drop": function (e) { dropHandler(e, $(this)); } });

});

}

ASPX

<%@ Register Src="~/admin/widgets/assetmanager.ascx" TagPrefix="uc" TagName="AssetManager" %>

<uc:AssetManager runat="server" ID="Slides" />

<uc:AssetManager runat="server" ID="Boxes" />

ASCX

<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">

<script type="text/javascript">

//.Master file needs: function pageLoad() { loadAsync() }

//Utils.js - loadAsync(), dropHandler(), dragEnterHandler(), dragLeaveHandler()

function fileUploaded<%= AsyncUpload1.ClientID %>(sender, args) {

alert("fileUploaded<%= AsyncUpload1.ClientID %>");

$(".invalid.msg" + <%= AsyncUpload1.ClientID %>).hide();

$find("<%=RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("RebindAssets<%= AsyncUpload1.ClientID %>");

$telerik.$(".invalid.msg" + <%= AsyncUpload1.ClientID %>).html("");

sender.deleteFileInputAt(0);

}

function validationFailed<%= AsyncUpload1.ClientID %>(sender, args) {

alert("validationFailed<%= AsyncUpload1.ClientID %>");

$(".invalid.msg" + <%= AsyncUpload1.ClientID %>).show();

$(".invalid.msg" + <%= AsyncUpload1.ClientID %>).html("Sorry, you are trying to upload an invalid type of file.");

if ($(".filetypes").text() != "") {

var types = $(".filetypes").text().replace("(", "").replace(")", "");

$(".invalid.msg" + <%= AsyncUpload1.ClientID %>).append(" You can upload the following types of file: " + types + ".");

}

sender.deleteFileInputAt(0);

}

</script>

<script type="text/javascript">

//Telerik.Web.UI.RadAsyncUpload.Modules.Flash.isAvailable = function () { return false; };

Telerik.Web.UI.RadAsyncUpload.Modules.Silverlight.isAvailable = function () { return false; };

</script>

</telerik:RadScriptBlock>

<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">

<span class="msg error invalid msg<%= AsyncUpload1.ClientID %>" style="display:none;"></span>

</telerik:RadCodeBlock>

<div id="pnlDropZone" runat="server" class="dropzone dr{0}">

<h5>To upload, drop files here</h5>

<p>or</p>

<telerik:RadAsyncUpload runat="server" ID="AsyncUpload1" MultipleFileSelection="Automatic" MaxFileSize="52428800" Localization-Select="Select Files" DropZones=".dropzone" />

</div>

ASCX.VB

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

Dim manager As RadAjaxManager = RadAjaxManager.GetCurrent(Page)

AddHandler manager.AjaxRequest, AddressOf assets_AjaxRequest

manager.AjaxSettings.AddAjaxSetting(manager, AsyncUpload1)

manager.AjaxSettings.AddAjaxSetting(manager, ddlMoveTo)

If Not IsPostBack Then

AsyncUpload1.TargetFolder = "~/Images"

AsyncUpload1.OnClientFileUploaded = "fileUploaded" & AsyncUpload1.ClientID

AsyncUpload1.OnClientValidationFailed = "validationFailed" & AsyncUpload1.ClientID

pnlDropZone.Attributes("class") = pnlDropZone.Attributes("class").Replace("{0}", AsyncUpload1.ClientID)

End If

End Sub

Protected Sub AsyncUpload1_FileUploaded(sender As Object, e As Telerik.Web.UI.FileUploadedEventArgs) Handles AsyncUpload1.FileUploaded

e.File.SaveAs(HttpContext.Current.Server.MapPath("~/images/" & e.File.FileName))

'Add to database

End Sub

CSS

.dropzone

{

text-align:center;

padding:15px;

border:dashed 5px #c0c0c0;

}

.dropzone h5

{

margin:0;

}

.dropzone .RadUpload

{

margin:5px auto 0;

text-align:center;

}

.dropzone .RadUpload li

{

list-style:none;

}

.dropzone .RadUpload input.ruFakeInput

{

display: none;

}

My problem is that when I drag a file to the DropZone for either of the controls, both 'fileUploaded' functions are called and the file is uploaded twice. If I drag to the actual AsyncControl itself, everything works fine and the file is only uploaded once.

Help!?

Tony.

4 Answers, 1 is accepted

answered on 20 Feb 2013, 02:23 PM

MaterpageTEst.zip

Hi Tony,

I have tested the issue described in a sample code similar to the one on-our demo and it worked properly at my side.I am attaching my test project. Would you lease review it and elaborate what else should be done or changed it in order to reproduce the described behavior?

Greetings,
Plamen
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.

answered on 20 Feb 2013, 03:07 PM

Okay, either you missed the point entirely or I did not explain it sufficiently, but either way I have submitted a project via support ticket 661557 using my original code above (with a few unnecessary bits removed).

If you drag a file over the actual control (where it says "select") things work fine with the 'file uploaded' JavaScript firing only once. If you drag over the drop zone area (avoiding the "select" dialogue) the JavaScript fires twice, once for each usercontrol, hence a file would be uploaded twice.

My belief is that my JavaScript in the pageLoad function is incorrect, but I cannot see where.

Thanks in advance,

Tony.