AsycUpload using DropZone in usercontrol fires OnClientFileUploaded for each control

[Matt]

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.

[Plamen]

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

[Matt]

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.

[Plamen]

Hello Tony,

 
We have inspected your project and found out what is causing that behavior. It appeared to be because both RadAsyncUpload controls have the same drop zone - ".dropzone" and this was causing the unusual behavior. 

Hope this will be helpful.

Greetings,
Plamen
the Telerik team

[Matt]

Perfect! Thank you.